颜色与纹理

多幅纹理

Author: zhangqf

12.Texture/18.00.08.png

@@ -11,10 +11,13 @@ const FSHADER_SOURCE =
     'precision mediump float;\n'+
     // 'uniform float u_Width;\n'+
     // 'uniform float u_Height;\n' +
-    'uniform sampler2D u_Sampler;\n' +
+    'uniform sampler2D u_Sampler1;\n' +
+    'uniform sampler2D u_Sampler2;\n' +
     'varying vec2 v_TexCoord;\n' +
     'void main(){' +
-    'gl_FragColor = texture2D(u_Sampler, v_TexCoord);\n' +
+    'vec4 color1 = texture2D(u_Sampler1, v_TexCoord);\n' +
+    'vec4 color2 = texture2D(u_Sampler2, v_TexCoord);\n' +
+    'gl_FragColor = color1 * color2;\n' +
     '}';
 
 // import textture from '../images/textture.jpeg'/
@@ -87,46 +90,76 @@ function initVertexBuffers(gl) {
 }
 
 function initTextures(gl, n) {
-    const texture = gl.createTexture() // 创建纹理对象
+    const texture1 = gl.createTexture() // 创建纹理对象
+    const texture2 = gl.createTexture()
 
-    const u_Sampler = gl.getUniformLocation(gl.program, 'u_Sampler') // 获取u_Sampler的存储位置
+    const u_Sampler1 = gl.getUniformLocation(gl.program, 'u_Sampler1') // 获取u_Sampler的存储位置
+    const u_Sampler2 = gl.getUniformLocation(gl.program, 'u_Sampler2')
 
-    const image = new Image() // 创建一个image对象
-
-    image.onload = function () {
-        loadTexture(gl, n, texture, u_Sampler, image);
+    const image1 = new Image() // 创建一个image对象
+    const image2 = new Image()
+    image1.onload = function () {
+        loadTexture(gl, n, texture1, u_Sampler1, image1, 1);
         console.log(333)
     }
+    image2.onload = function () {
+        loadTexture(gl, n ,texture2, u_Sampler2, image2, 2)
+    }
 
-    image.onerror = function() {
-        console.error('Failed to load image at ' + image.src);
+    image1.onerror = function() {
+        console.error('Failed to load image at ' + image1.src);
     };
-    image.src = 'https://webglfundamentals.org/webgl/resources/f-texture.png';
+    image1.src = './camel.png';
     // image.src='http://127.0.0.1:5501/images/vshaderAndFshader.png'
-    image.setAttribute("crossOrigin", "Anonymous");
+    image1.setAttribute("crossOrigin", "Anonymous");
+
+
+
+
+    image2.src = './camel.png'
+
+    image2.setAttribute("crossOrigin", "Anonymous");
+
     return true;
 }
 
-function loadTexture(gl, n, texture, u_Sampler, image) {
+var g_texUnit1 = false, g_texUnit2 = false
+
+function loadTexture(gl, n, texture, u_Sampler, image, texUnit) {
     gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1) // 对纹理图像进行y轴反转
 
-    gl.activeTexture(gl.TEXTURE0)
+    if(texUnit == 1) {
+        gl.activeTexture(gl.TEXTURE1)
+        g_texUnit1 = true
+    }else {
+        gl.activeTexture(gl.TEXTURE2)
+        g_texUnit2 = true
+    }
+
+    // gl.activeTexture(gl.TEXTURE0)
 
     gl.bindTexture(gl.TEXTURE_2D, texture)
 
     // 配置纹理参数
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST)
 
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image)
 
-    gl.uniform1i(u_Sampler, 0)
+    gl.uniform1i(u_Sampler, texUnit)
 
     console.log('Texture loaded:', image.width, image.height);
 
 
+
     // gl.drawArrays(gl.TRIANGLES, 0, n)
-    gl.clearColor(0.0, 0.0, 0.0, 1.0)
 
-    gl.clear(gl.COLOR_BUFFER_BIT)
-    gl.drawArrays(gl.TRIANGLE_STRIP, 0, n)
+    // gl.drawArrays(gl.TRIANGLE_STRIP, 0, n)
+
+    if(g_texUnit1 && g_texUnit2) {
+        gl.clearColor(0.0, 0.0, 0.0, 1.0)
+
+        gl.clear(gl.COLOR_BUFFER_BIT)
+        console.log(4)
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, n)
+    }
 }