glsl gl FragCoord 與螢幕關係 - w3c學習教程

gl_fragcoord根據glsl language spec的解釋為： ... 由於是2d渲染，最終每個fragment的gl_fragcoord的z接近0.0， 而w 為1.0， 而它的x, y分量，是相對 ... glslglFragCoord與螢幕關係 2021-08-1405:47:29字數2608閱讀3255 原創 2016年02月26日17:06:01 [plain] viewplain 執行環境：android opengles版本：2.0 3d引擎庫：rajawali3d shadertoy上用的shader語言為glsl，效果是用webgl跑的，而webgl封裝了opengles， 所以shadertoy上的例子同樣使用於android端。

shadertoy基本上都是用fragmentshader對柵格化後的畫素進行處理。

 大部分會用到紋理來豐富最終渲染結果的形狀和質地，有些也會用到聲音，鍵盤等外部輸入資訊。

  但是，最終都是歸結為對柵格化區域內的每個畫素進行處理，因此，我們首先來認識gl_fragcoord這個內建變數以及其與螢幕座標的關係。

gl_fragcoord根據glsllanguagespec的解釋為： 它是fragmentshaders的輸入變數，並持有該framgent的螢幕相對座標(x,y,z,1/w) 什麼是螢幕相對座標，它的座標範圍是多少，這些都沒有告訴我們。

需要我們實驗 假設我們採用2dorthoprojection的方式來渲染，輸入的頂點資訊為螢幕的4個頂點座標，這樣我們最終渲染出來的是一個鋪滿螢幕的圖。

由於是2d渲染，最終每個fragment的gl_fragcoord的z接近0.0，而w為1.0，而它的x,y分量，是相對於螢幕左下角為原點的螢幕座標。

什麼意思？ 假如，我們設定的viewport的渲染區域為(0,0,1280,574)這麼大，那麼，gl_fragment的x分量範圍就在0~1280之間，y分量就在0~574之間。

我們可以用一下測試用例來進行測試： vertexshader: [plain] viewplain copy precision mediump float ;   uniform mat4 umvpmatrix;   attribute vec4 aposition;   void main()   fragmentshader： [plain] viewplain copy precision mediump float ;   uniform vec2 screensize;  // step  1   void main()   if(uv.y>0.98 &&uv.y<1.0 )                     // step 4   //calculate the final color mixing lines and backgrounds.   vec3 bg = mix(vec3(0.93 , 0.71 ,  0.62 ),  vec3(0.9 , 0.44 , 0.44),   r);  // step 5   bg = mix(bg, vec3 (0.9 , 0.91 , 0.62 ), c);                                //  step 6   gl_fragcolor = vec4(bg, 1.0);   }   執行後，效果圖如下: 這裡主要說下 fragmentshader： step1：之前說到，gl_fragcoord的座標範圍，這裡screensize表示螢幕的寬高。

step2: 將每個fragment的每個gl_fragcoord歸一化，這是一個慣例，利於後面計算 step3:和step4: 這兩個分別表示，當fragment的座標(x,y)的x和y分量分別落在這個範圍時（即中間）c的值會發生變化 step5: step5和step6都用到了glsl的mix內建函式， 考慮到bg=mix(color1,color2,r)它的意思，就是將color1和color2兩種顏色，按照bg=color1*(1-r)+r*color2的方式混合，其中bg,color1,color2都是表示顏色，有三個分量。

那麼，當r=0.0時，表示的是color1顏色，當r=1.0表示的是color2顏色。

我們利用mix可以在一種背景上標記出另一種顏色。

step3和step4表示，當x,y分別落在值範圍的中間時，c的值從0.0變為1.0，即在這個範圍內，背景色變為我們設定的顏色。

當我們把step3和step4改為： if(uv.x> 0.09 &&uv.x< 0.11 )           //step3 if(uv.y> 0.09 &&uv.y< 0.11 )          //step4 效果圖如下： 通過，以上的例子我們得出gl_fragcoord的正確表示方式。

相關推薦 C與C的語法區別1 資料結構單連結串列 Kafka叢集搭建 glslglFragCoord與螢幕關係 馬踏過河卒 相關推薦 C與C的語法區別1 資料結構單連結串列 Kafka叢集搭建 glslglFragCoord與螢幕關係 馬踏過河卒 相關閱讀 C與C的語法區別1 資料結構單連結串列 Kafka叢集搭建 glslglFragCoord與螢幕關係 馬踏過河卒 007Linux下編譯安裝GCC720 topic 科技 教育 python 社會 linux 數碼 java c++ 遊戲 演算法 資料庫 健康 文化 mysql 汽車 娛樂 科學 財經 資料結構 C語言 職場 php oracle c# C 作業系統 工作 體育 sql 網路