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