1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158
|
var VSHADER_SOURCE = 'attribute vec4 a_Position;\n' + 'attribute vec2 a_TexCoord;\n' + 'varying vec2 v_TexCoord;\n' + 'void main() {\n' + ' gl_Position = a_Position;\n' + ' v_TexCoord = a_TexCoord;\n' + '}\n';
var FSHADER_SOURCE = '#ifdef GL_ES\n' + 'precision mediump float;\n' + '#endif\n' + 'uniform sampler2D u_Sampler0;\n' + 'uniform sampler2D u_Sampler1;\n' + 'varying vec2 v_TexCoord;\n' + 'void main(){\n'+ ' vec4 color0 = texture2D(u_Sampler0, v_TexCoord);\n'+ ' vec4 color1 = texture2D(u_Sampler1, v_TexCoord);\n'+ ' gl_FragColor = color0 * color1;\n'+ '}\n';
function main() { var canvas = document.getElementById("webgl"); if (!canvas) { console.log("Failed to retrieve the <canvas> element"); return; }
var gl = getWebGLContext(canvas); if (!gl) { console.log("Failed to get the rendering context for WebGL"); return; }
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { console.log("Failed to initialize shaders."); return; }
var n = initVertexBuffers(gl); if (n < 0) { console.log('Failed to set the positions of the vertices'); return; }
gl.clearColor(0.0, 0.0, 0.0, 1.0);
if (!initTextures(gl, n)) { console.log('Failed to intialize the texture.'); return; } }
function initVertexBuffers(gl){ var verticesTexCoords = new Float32Array( [ -0.5, 0.5, 0.0, 1.0, -0.5, -0.5, 0.0, 0.0, 0.5, 0.5, 1.0, 1.0, 0.5, -0.5, 1.0, 0.0, ] ); var n=4;
var vertexTexCoordBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexTexCoordBuffer);
gl.bufferData(gl.ARRAY_BUFFER, verticesTexCoords, gl.STATIC_DRAW);
var FSIZE = verticesTexCoords.BYTES_PER_ELEMENT;
var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE*4, 0); gl.enableVertexAttribArray(a_Position);
var a_TexCoord = gl.getAttribLocation(gl.program, 'a_TexCoord');
gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, FSIZE*4, FSIZE*2); gl.enableVertexAttribArray(a_TexCoord);
return n; }
function initTextures(gl, n) { var texture0 = gl.createTexture(); var texture1 = gl.createTexture();
var u_Sampler0 = gl.getUniformLocation(gl.program, 'u_Sampler0'); var u_Sampler1 = gl.getUniformLocation(gl.program, 'u_Sampler1');
var image0 = new Image(); var image1 = new Image();
image0.onload = function () { loadTexture(gl, n, texture0, u_Sampler0, image0, 0); }; image1.onload = function () { loadTexture(gl, n, texture1, u_Sampler1, image1, 1); };
image0.src = '../resources/sky.jpg'; image1.src = '../resources/circle.gif';
return true; }
var g_texUnit0 = false, g_texUnit1 = false;
function loadTexture(gl, n, texture, u_Sampler, image, texUnit){ gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1); if(texUnit == 0) { gl.activeTexture(gl.TEXTURE0); g_texUnit0 = true; } else { gl.activeTexture(gl.TEXTURE1); g_texUnit1 = true; }
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);
gl.uniform1i(u_Sampler, texUnit);
gl.clear(gl.COLOR_BUFFER_BIT);
if(g_texUnit0 && g_texUnit1) gl.drawArrays(gl.TRIANGLE_STRIP, 0, n); }
|