webGL环境照明没有纹理对象

时间:2013-04-07 18:41:18

标签: javascript webgl shader lighting

我一直关注these tutorials哪个好,但我似乎无法弄清楚如何点亮一个没有纹理的对象。我的意思是教程中给出的着色器没有不允许被绘制的对象没有纹理。我在解释这个问题时遇到了麻烦,但我不认为如果有人知道webGL照明是如何工作的,那么在这里倾倒大量代码会有所帮助。

你能举例说明在一个简单的金字塔对象上使用它吗?

我确实有多边形中所有三角形的法线,这不是问题。

1 个答案:

答案 0 :(得分:0)

当您不想使用纹理时,使用1x1像素白色纹理的最简单方法。

tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,
              new Uint8Array([255, 255, 255, 255]));

否则你需要一个不同的着色器,一个不带纹理的着色器。这意味着您的代码通过代码管理不同的路径变得更加复杂。如果你想走这条路线,请在着色器中查看texture2D并用颜色替换它。例如,如果代码是

gl_FragCoord = texture2D(u_samplers, v_texcoord);

将其更改为

gl_FragCoord = vec4(1,0,0,1);  // just use red

或者如果您希望能够设置它

uniform vec4 u_color;

gl_FragCoord = u_color;  // get color from uniform

您现在可以使用

设置该颜色
// at init time
colorLocation = gl.getUniformLocation(program, "u_color");

// at draw time
gl.uniform4fv(colorLocation, [1, 0, 0, 1]);  // set color to red