背景本文在介绍纹理相关理论和简单使用前收录在《数据可视化和图形学》专栏。有需要的可以参考上面，在上面的基础上进行多纹理练习（多帮助群里的小伙伴提前出坑！！！）本文概述了多纹理渲染实现思路多纹理渲染编码（几种场景）1.多纹理渲染实现思路多纹理渲染更多的是指gl_FragColor采用混合纹理texture2D*texture2D之间的关系。写这篇文章的初衷是帮助群里的小伙伴在坎坷的道路上前行~会提到需要多顶点（贴图）渲染，然后重叠坐标。定义vertexArray（本文示例为2point）定义textureArray创建buffer（这里注意多个渲染节点的公共buffer），一步步注册shader。绑定数据并渲染。多纹理渲染编码（几个场景）第一个gl_FragColor采用混合纹理texture2D*texture2Dshader部分不难...//vertexattributevec2a_position;//坐标属性vec2a_texCoord;//Textureuniformvec2u_resolution;varyingvec2v_texCoord;voidmain(){//坐标变换pixel->1.0,0.0...vec2zeroToOne=a_position/u_resolution;vec2zeroToTwo=zeroToOne*2.0;vec2clipSpace=zeroToTwo-1.0;gl_Position=vec4(clipSpace*vec2(1,-1),0,1);//片段纹理使用v_texCoord=a_texCoord;}//fragmentuniformsampler2Du_image0;//textureuniformsampler2Du_image1;//来自vertexshadervaryingvec2v_texCoord;voidmain(){vec4color0=texture2D(u_image0,v_texCoord);vec4color1=texture2D(u_image1,v_texCoord);gl_FragColor=color0*color1;//可以理解为混合纹理}JavaScript创建节点坐标/纹理/着色器&数据连接/渲染完成也很简单！//原理图在这里代码完整代码上传githubvartexcoordBuffer=gl.createBuffer();//纹理gl.bindBuffer(gl.ARRAY_BUFFER,texcoordBuffer);//bufferData...for(...imageslength){//循环遍历gl.bindTexture(gl.TEXTURE_2D,纹理);}varpositionBuffer=gl.createBuffer();//节点坐标在这里绘制TRIANGLES三角形gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer);//bufferData//缓冲区分配给属性变量gl.vertexAttribPointer(texcoordLocation,size,type,normalize,stride,offset);gl.vertexAttribPointer(positionLocation,size,type,normalize,stride,offset);//启用属性变量gl.enableVertexAttribArray(positionLocation);gl。enableVertexAttribArray(texcoordLocation);//质地！！！！激活纹理单元gl.activeTexture(gl.TEXTURE0);//给定纹理绑定到目标（顶点）gl.bindTexture(gl.TEXTURE_2D,textures[0]);//画！！！你完成了gl.drawArrays(gl.TRIANGLES,0,6);第二个多节点贴图（其实坐标重叠，后面覆盖前者。。。）shader部分不难（没变化）...//vertexattributevec2a_position;attributevec2a_texCoord;attributelowpfloattextureIndex；均匀的vec2u_resolution；变化的vec2v_texCoord；变化的lowpfloatindexPicker；voidmain(){vec2zeroToOne=a_position/u_resolution.Tozero2Tozero;向量2clipSpace=zeroToTwo-1.0;gl_Position=vec4(clipSpace*vec2(1,-1),0,1);v_texCoord=a_texCoord;indexPicker=textureIndex;//控制片段着色器选择哪个纹理}//fragmentprecisionmediumpfloat;//textureuniformsampler2Du_image[2];//从顶点着色器传入的纹理坐标。变化vec2v_texCoord；变化的lowp浮动索引选择器；voidmain(){if(indexPicker<0.5){gl_FragColor=texture2D(u_image[0],v_texCoord);}else{gl_FragColor=texture2D(u_image[1],v_texCoord);}}JavaScript也很简单，创建节点坐标/纹理/着色器&数据连接/渲染完成！//这里展示完整代码上传到githubvartexcoordBuffer=gl.createBuffer();//纹理gl.bindBuffer(gl.ARRAY_BUFFER,texcoordBuffer);//bufferData...for(...imageslength){//遍历gl.bindTexture(gl.TEXTURE_2D,texture);}//注意顶点!!!!这与上面的不同varpositionBuffer=gl.createBuffer();//节点坐标在这里绘制TRIANGLES三角形gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer);//bufferData//缓冲区分配给属性变量gl.vertexAttribPointer(texcoordLocation,size,type,normalize,stride,offset);gl.vertexAttribPointer(positionLocation,size,type,normalize,stride,offset);//启用属性变量gl.enableVertexAttribArray(positionLocation);gl.enableVertexAttribArray(texcoordLocation);//质地！！！！活动纹理单元gl.activeTexture(gl.TEXTURE0);//给定绑定到目标（顶点）的纹理gl.bindTexture(gl.TEXTURE_2D,textures[0]);//画！！！你完成了gl.drawArrays(gl.TRIANGLES,0,vertextArray.length/2);//绘制多个（三角形组合）正方形！！！！关注代码中的注释（解决你的疑惑）1.webgl-utils.jswebgl相关函数封装工具库完整代码示例【请点击git仓库查看代码示例】texture.htmltexture1.html2D渲染你可能需要了解的纹理缓存纹理压缩2D/2D纹理优化渲染优化……最后强烈希望大家学习相关的理论知识；理论在日常生活中可能很少用到，但是可以决定你能走多远（有的人问怎么办，努力练习）感觉写的速度我又来了，哈哈哈。。。我会继续的最近更新（因为我正在开发自己的渲染引擎。这很难说......抱歉）
