webGL环境照明没有对象上的纹理

Question

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

你能举一个简单的金字塔对象使用它的例子吗？

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

Answer 1

最简单的方法就是在不想使用纹理时使用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