Webgl 双纹理立方体

/** *为纹理框创建缓冲区以使用WebGL进行渲染的类 */ 类RasterTextureBox{ /** *为纹理框创建所有WebGL缓冲区 * 6 ---- 7 * / | / | * 3 ---- 2 | * | | | | * | 5 ---|- 4 * | / | / * 0 ---- 1 *从负z轴方向看 *@param{WebGLContext}gl-画布的上下文 *@param{Vector}minPoint-长方体的最小x，y，z *@param{Vector}maxPoint-长方体的最大x，y，z */ 构造函数、最小点、最大点、纹理{ this.gl=gl； 常数mi=最小点； 常数ma=最大点； 设顶点=[ //正面 mi.x，mi.y，ma.z，ma.x，mi.y，ma.z，ma.x，ma.y，ma.z， 妈,妈,妈,妈,妈,妈,妈,妈,妈,妈,妈,妈,， //背 妈咪，妈咪，妈咪，妈咪，妈咪，妈咪，妈咪，妈咪， mi.x，ma.y，mi.z，ma.x，ma.y，mi.z，ma.x，mi.y，mi.z， //对 妈x，妈y，妈z，妈x，妈y，妈z，妈x，妈y，妈z， 妈，妈，妈，妈，妈，妈，妈，妈，妈，妈， //顶 mi.x，ma.y，ma.z，ma.x，ma.y，ma.z，ma.x，ma.y，mi.z， 妈,妈,妈,妈,妈,妈,妈,妈,妈,妈,妈,， //左 mi.x，mi.y，mi.z，mi.x，mi.y，ma.z，mi.x，ma.y，ma.z， mi.x，ma.y，ma.z，mi.x，ma.y，mi.z，mi.x，mi.y，mi.z， //底部 mi.x，mi.y，mi.z，ma.x，mi.y，mi.z，ma.x，mi.y，ma.z， 妈，咪，咪，咪，咪，咪，咪，咪，咪，咪，咪，咪，咪，咪 ]; const vertexBuffer=gl.createBuffer； gl.bindBuffergl.ARRAY_BUFFER，vertexBuffer； gl.bufferDatagl.ARRAY\u BUFFER，新float32arrayvities，gl.STATIC\u DRAW； this.vertexBuffer=vertexBuffer； this.elements=顶点.length/3； 让cubeTexture=gl.createTexture； 让cubeImage=新图像； cubeImage.onload=函数{ gl.bindTexturegl.TEXTURE_2D，立方结构； gl.texImage2Dgl.TEXTURE_2D，0，gl.RGBA，gl.RGBA，gl.UNSIGNED_字节，立方体图像； gl.texParameterigl.TEXTURE_2D，gl.TEXTURE_MIN_过滤器，gl.LINEAR； gl.texParameterigl.TEXTURE_2D、gl.TEXTURE_WRAP_S、gl.CLAMP_TO_EDGE； gl.texParameterigl.TEXTURE_2D、gl.TEXTURE_WRAP_T、gl.CLAMP_至边； gl.bindTexturegl.TEXTURE_2D，空； } cubeImage.src=纹理； this.texBuffer=cubeTexture； 设uv=[ //正面 0, 0, 1, 0, 1, 1, 1, 1, 0, 1, 0, 0, //背 0, 0, 1, 0, 1, 1, 1, 1, 0, 1, 0, 0, //对 0, 0, 1, 0, 1, 1, 1, 1, 0, 1, 0, 0, //顶 0, 0, 1, 0, 1, 1, 1, 1, 0, 1, 0, 0, //左 0, 0, 1, 0, 1, 1, 1, 1, 0, 1, 0, 0, //底部 0, 0, 1, 0, 1, 1, 1, 1, 0, 1, 0, 0, ]; 设uvBuffer=this.gl.createBuffer； gl.bindBuffergl.ARRAY_BUFFER，uvBuffer； gl.bufferDatathis.gl.ARRAY_BUFFER，新Float32Arrayuv， gl.静态绘制； this.texCoords=uvBuffer； } /** *渲染纹理框 *@param{Shader}Shader-用于渲染的着色器 */ 渲染器{ this.gl.bindbuffer this.gl.ARRAY\u BUFFER，this.vertexBuffer； const positionLocation=shader.getAttributeLocation\u position； this.gl.enableVertexAttributeArrayPositionLocation； this.gl.vertexAttributePointerPositionLocation，3，this.gl.FLOAT，false，0，0； //在this.texCoords中绑定纹理坐标 //到着色器中的属性 //待办事项[练习9] this.gl.bindbuffer this.gl.ARRAY_buffers，this.texCoords； const texCoordLocation=shader.getAttributeLocationa_texCoord； this.gl.enableVertexAttributeArrayExcoordLocation； this.gl.vertexAttributePointerExcoordLocation，2，this.gl.FLOAT，false，0，0； this.gl.activeTexturegl.TEXTURE0； this.gl.bindTexturegl.TEXTURE_2D，this.texBuffer； shader.getUniformIntsampler.set0； this.gl.drawArraysthis.gl.TRIANGLES，0，this.elements； this.gl.disableVertexAttributeArrayPositionLocation； //TODO[练习9]禁用纹理顶点属性数组 this.gl.disablevertexattributearraytexcoordlocation； } } 精密中泵浮子； 均匀取样器； 可变矢量2 v_texCoord； 主空隙{ //gl_FragColor=vec4 0.0,0.0,0.5,1.0； //从纹理中读取碎片颜色 //待办事项[练习9] gl_FragColor=纹理采样器，vec2v_texCoord.s，v_texCoord.t； } 属性向量3 a_位置； 属性向量2 a_texCoord； 可变矢量2 v_texCoord； 均匀mat4m； 均匀mat4v； 均匀mat4p； 无效主无效 { gl_位置=P*V*M*vec4 a_位置，1.0； v_texCoord=a_texCoord； } 阿苏明 g如果代码正常，则需要更改片段着色器以使用两种纹理

<script id="2d-fragment-shader" type="x-shader/x-fragment">
precision mediump float;

uniform sampler2D sampler1;
uniform sampler2D sampler2;
varying vec2 v_texCoord;

void main( void ) {
  //gl_FragColor = vec4( 0.0, 0.0, 0.5, 1.0 );
  // Read fragment color from texture
  // TODO [exercise 9]
  gl_FragColor = texture2D(sampler1, vec2(v_texCoord.s, v_texCoord.t)) *
                 texture2D(sampler2, vec2(v_texCoord.s, v_texCoord.t));
}
</script>

然后在渲染代码中，需要设置两种纹理

    this.texBuffers.forEach((texBuffer, ndx) => {
      this.gl.activeTexture(gl.TEXTURE0 + ndx);
      this.gl.bindTexture(gl.TEXTURE_2D, texBuffer);
      shader.getUniformInt(`sampler${ndx}`).set(ndx);
    });

你会这样调用你的构造函数

const rtBox = new RasterTextureBox(gl, minPoint, maxPoint, [
  "some/url/to/image1.png",
  "some/url/to/image2.png",
]);

---

在我的立方体上添加两个纹理是什么意思？您想如何添加它们？您想在不同的面上使用不同的纹理吗？是否希望这两个图像在每个面上相互混合？是否要独立显示两个图像？缩放？轮换？重复的？立方体的每个面都应该显示相同的图像，但这两个图像有点相互混合。就像这样：立方体在旋转，但一开始不必移动。我只想把这些面添加到立方体中。你能在一个立方体中发布一个吗？

const rtBox = new RasterTextureBox(gl, minPoint, maxPoint, [
  "some/url/to/image1.png",
  "some/url/to/image2.png",
]);