使 webgl canvas 透明

Question

我想讓我的 webgl canvas 透明，但問題是我在 codepen 上選擇了代碼： here並在論壇上看到了相同的內容，他們也在討論如何更改顏色，但沒有任何答案。

我說的唯一一件事是編寫canvas.fillStyle = "#ffffffff"不起作用，因為gl.clearColor(0, 0, 0, 0) 。 他們說顏色來自着色器，但我對 webgl 還是很陌生，我現在還不太了解着色器是如何工作的。

我也看了這個問題： How to make Webgl canvas transparent並沒有幫助我。

Answer 1

gl_FragColor = texture2D(uTexture, vUv);

這條線說明 fragColor 女巫是 vec4 將通過采樣紋理着色。

在這種情況下，基本上您可以將 vec4 視為 RGBA 向量，因此如果您執行以下操作：

gl_FragColor = vec4(0.0f, 0.0f, 0.0f, 1.0f);

在這個像素顏色將是黑色但不透明

gl_FragColor = vec4(1.0f, 1.0f, 1.0f, 0.0f);

將是一個白色但透明的像素

所以通過這樣做：

 gl_FragColor = dissipation * texture2D(uSource, coord);
        gl_FragColor.a = 1.0;

您基本上是在刪除透明度信息

要使其透明，您必須在通道之間保持和保持 alpha。 簡單的解決方法是設置

gl_FragColor.a = gl_FragColor.r

否則，您也可以例如從 rgb 計算亮度並將其用作 alpha。

那么gl.clearColor(0, 0, 0, 0)就可以了

PS 幾句話着色器的工作原理：您可以想象有兩種類型的效果，一種稱為屏幕空間（thouse 是后期處理）和 3d 的。 因此，對於屏幕空間效果，您將平面應用於您的視圖，而該平面的 uv 線是屏幕的線，gpu 按像素數量插值 uv 並並行計算二維像素數組，然后通過 uv 坐標或掩碼等...您每秒計算屏幕上每個像素的顏色 60 次...不知道這是否有意義，但考慮它的最簡單方法是您的 vUv 是像素網格，您必須通過檢查或移動 vUv 來找到顏色