如何对三角形或平面进行 Gourad 着色，其三个点都用各自的颜色给出？
三角形ABC
点 A 有坐标 x1,y1 和颜色 r1,g1,b1
点 B 有坐标 x2,y2 和颜色 r2,g2,b2
点 C 有坐标 x3,y3 和颜色 r3,g3,b3
谁能帮忙
仅使用 Javascript
问问题
334 次
1 回答
1
好的，当然。这是 C 中的一个实现：http ://www.nbb.cornell.edu/neurobio/land/oldstudentprojects/cs490-95to96/guo/report.html
如果我没记错的话，您还可以在 Quake 和/或 Quake2 源代码版本中找到一个。
老实说，距离我上次实施它已经过去了大约 18 年。早在 3d 卡开始出现在消费类计算机上的时代。当然，现在甚至在 DirectX 和 openGL 都可用的板载图形芯片中也有硬件实现。当然，可以使用 WebGL 从网页中利用 openGL。
该算法非常简单直接。您渲染水平线。每条线都有一个开始颜色和一个结束颜色。您只需在这两点之间插入颜色。为了获得每条水平线的开始颜色和结束颜色，您需要对每个顶点给出的颜色进行插值。
它只是颜色本身的线性插值 - 仅在每个顶点从面法线和光矢量计算颜色，这与 Phong 模型不同，它对入射角进行插值，然后用于计算每个像素的颜色. （Phong 允许在多边形中间出现镜面高光，Gouraud 允许在高光区域内包含顶点时使用它们。Gouraud 显然也更便宜，因为每个三角形有 3 个点积，而对于每个像素只有一个点积蓬）
使用 1 个组件的粗略示例，而不是 3 个
?...?
.....
.....
.....
?...?
1...?
.....
.....
.....
5...?
1...2
.....
.....
.....
5...3
11122
22222
33322
44433
55433
仅从算法的描述来实现是非常令人满意的。您可能会发现一些有用的资源：
shaderToy (webGL 演示) - http://www.iquilezles.org/apps/shadertoy/
Gouraud 着色的 js 示例 - http://eng-przemelek.blogspot.com.au/2010/05/gouraud-shading-in-javascript.html
玩得开心！
于 2013-02-17T01:52:04.603 回答