本文主要是介绍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
这篇关于webgl的shader系列(7)——贴图和法线贴图的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!