這篇郭先生說一下three.js著色器的內建變數,分別是
- gl_PointSize:在點渲染模式中,控制方形點區域渲染畫素大小(注意這裡是畫素大小,而不是three.js單位,因此在移動相機是,所看到該點在螢幕中的大小不變)
- gl_Position:控制頂點選完的位置
- gl_FragColor:片元的RGB顏色值
- gl_FragCoord:片元的座標,同樣是以畫素為單位
- gl_PointCoord:在點渲染模式中,對應方形畫素座標
他們或者單個出現在著色器中,或者組團出現在著色器中,是著色器的靈魂。下面來分別說一說他們的意義和用法。
1. gl_PointSize
gl_PointSize內建變數是一個float型別,在點渲染模式中,頂點由於是一個點,理論上我們並無法看到,所以他是以一個正對著相機的正方形面表現的。使用內建變數gl_PointSize主要是用來設定頂點渲染出來的正方形面的相素大小(預設值是0)。
void main() { gl_PointSize = 10.0; }
2. gl_Position
gl_Position內建變數是一個vec4型別,它表示最終傳入片元著色器片元化要使用的頂點位置座標。vec4(x,y,z,1.0),前三個參數列示頂點的xyz座標值,第四個引數是浮點數1.0。
void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); }
3. gl_FragColor
gl_FragColor內建變數是vec4型別,主要用來設定片元畫素的顏色,它的前三個參數列示片元畫素顏色值RGB,第四個引數是片元畫素透明度A,1.0表示不透明,0.0表示完全透明。
void main() { gl_FragColor = vec4(1.0,0.0,0.0,1.0); }
4. gl_FragCoord
gl_FragCoord內建變數是vec2型別,它表示WebGL在canvas畫布上渲染的所有片元或者說畫素的座標,座標原點是canvas畫布的左上角,x軸水平向右,y豎直向下,gl_FragCoord座標的單位是畫素,gl_FragCoord的值是vec2(x,y),通過gl_FragCoord.x、gl_FragCoord.y方式可以分別訪問片元座標的縱橫座標。這裡借了一張圖
下面我們舉個例子
fragmentShader: ` void main() { if(gl_FragCoord.x < 600.0) { gl_FragColor = vec4(1.0,0.0,0.0,1.0); } else { gl_FragColor = vec4(1.0,1.0,0.0,1.0); } } `
這裡以600畫素為分界,x值小於600畫素的部分,材質被渲染成紅色,大於的部分為黃色。
5. gl_PointCoord
gl_PointCoord內建變數也是vec2型別,同樣表示畫素的座標,但是與gl_FragCoord不同的是,gl_FragCoord是按照整個canvas算的x值從[0,寬度],y值是從[0,高度]。而gl_PointCoord是在點渲染模式中生效的,而它的範圍是對應小正方形面,同樣是左上角[0,0]到右下角[1,1]。
6. 內建變數練習
五個內建變數我們都大致的說了一遍,下面用一個小案例來試用一下除了gl_FragCoord的其他四個。先上圖,線上案例請點選部落格原文。
var planeGeom = new THREE.PlaneGeometry(1000, 1000, 100, 100); uniforms = { time: { value: 0 } } var planeMate = new THREE.ShaderMaterial({ transparent: true, side: THREE.DoubleSide, uniforms: uniforms, vertexShader: ` uniform float time; void main() { float y = sin(position.x / 50.0 + time) * 10.0 + sin(position.y / 50.0 + time) * 10.0; vec3 newPosition = vec3(position.x, position.y, y * 2.0 ); gl_PointSize = (y + 20.0) / 4.0; gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 ); } `, fragmentShader: ` void main() { float r = distance(gl_PointCoord, vec2(0.5, 0.5)); if(r < 0.5) { gl_FragColor = vec4(0.0,1.0,1.0,1.0); } } ` }) var planeMesh = new THREE.Points(planeGeom, planeMate); planeMesh.rotation.x = - Math.PI / 2; scene.add(planeMesh);
好了這篇就說到這了,再見。
轉載請註明地址:郭先生的部落格