WebGL着色器保存多個32位值

Question

我需要在每個WebGL片段着色器調用（包括沒有OES_texture_float或OES_texture_half_float擴展可用時）中保存多達8個32位值。看來我只能通過將它打包到4x8bits RGBA gl_FragColor中來存儲單個32位值。 有沒有辦法存儲8個值？

Answer 1

在片段着色器中每次調用繪製多個vec4數據的唯一方法是使用WEBGL_draw_buffers，它允許您將多個顏色附件綁定到幀緩衝區，然後在單個片段着色器調用中使用它們呈現給所有人

gl_FragData[constAttachmentIndex] = result; 

如果WEBGL_draw_buffers不是唯一可用的解決方法是我能想到的是

1. 渲染在多個繪製調用。

   撥打gl.drawArrays呈現第一個vec4，然後再用不同的參數或不同的着色器渲染第二個vec4。

2. 基於gl_FragCoord進行渲染，您可以在其中更改每個像素的輸出。

   。換句話說，第一像素獲取第一vec4，第二像素獲取第二個vec4等。例如

   float mode = mod(gl_Fragcoord.x, 2.); 
   gl_FragColor = mix(result1, result2, mode); 
   

   以這種方式將結果存儲這樣

   1212121212 
   1212121212 
   1212121212 
   

   成一個質地。欲瞭解更多vec4s你可以這樣做

   float mode = mod(gl_Fragcoord.x, 4.); // 4 vec4s 
   if (mode < 0.5) { 
       gl_FragColor = result1; 
   } else if (mode < 1.5) { 
       gl_FragColor = result2; 
   } else if (mode < 2.5) { 
       gl_FragColor = result3; 
   } else { 
       gl_FragColor = result4; 
   } 
   

   這可能會或可能不會比法1＃快。着色器更復雜，因爲它可能對每個像素的result1和result2都進行計算，但取決於GPU和流水線，您可能會免費獲得一些。

至於讓32位值了，即使沒有OES_texture_float你基本上會寫出來，使用了上述3個技術之一，更是8位值。

在WebGL2繪製緩衝區是一個必需的功能，因爲它在WebGL1中是可選的。在WebGL2中還有變換反饋，它將頂點着色器的輸出（變化）寫入緩衝區。