webgl的shader系列（7）——贴图和法线贴图

纹理映射需要顶点着色器和片元着色器的结合；首先在顶点着色器中把uv坐标传到片元着色器中，然后在片元着色器中根据每个片元的纹理坐标从纹理图像中抽取纹理的颜色。

                const VSHADER=`
                varying vec2 v_uv;
                void main(){
                    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
                    v_uv=uv;
                }
                `
                const FSHADER=`
                uniform sampler2D tex1;
                varying vec2 v_uv;
                void main(){
                    gl_FragColor=texture2D(tex1, v_uv);
                }
                `

法线贴图则是需要准备一张法线贴图和一张贴图，这里直接用Threejs的MeshPhongMaterial材质来表现比较简单。

看看对比图：（左边是一般贴图，右边是法线贴图）

源码地址：

https://gitee.com/niuge8905/webglsample