shader之漸變長方體實現（threejs）

shader之漸變長方體實現（threejs）

效果：

原理：

1.用varying將position（位置）、normal（法線）從頂點着色器傳遞到片元着色器

2.假設長方體高為40，將fract(vPosition.y)設置為gl_FragColor的色值可看到40行漸變：

3.通過除以長方體高可得：float cy = fract(vPosition.y/40.0);

4.通過位移計算可得顏色從0到1的漸變：float cy = fract((vPosition.y - 20.0) / 40.0);

 

5.通過位移和拉伸可控制取漸變中的一部分效果：float cy = (fract((vPosition.y - 20.0) / 40.0) + 0.7) * 0.7;

6.得到最終效果

完整着色器代碼：

                let v=`    
                        varying vec3 vNormal;
                        varying vec3 vPosition;
                            void main() {
                                //將attributes的normal通過varying賦值給了向量vNormal
                            vNormal = normal;
                            vPosition = position;
                                //projectionMatrix是投影變換矩陣 modelViewMatrix是相機坐標系的變換矩陣
                            gl_Position = projectionMatrix * modelViewMatrix * vec4( position.x, position.y, position.z, 1.0 );
                        }
                `

                let f =`
                        varying vec3 vNormal;
                        varying vec3 vPosition;
                        void main() {
                            float cy = (fract((vPosition.y - 20.0) / 40.0) + 0.7) * 0.7;
                            if(vNormal.x==0.0&&vNormal.y==1.0&&vNormal.z==0.0){
                                cy = 1.0;
                            }
                            gl_FragColor = vec4(0.0, cy, cy, 1.0);
                        }
                    `

 

合作：@浩

鑽研不易，轉載請注明出處。。。。。。