//往后的先不研究 // cuon-utils.js (c) 2012 kanda and matsuda /** * Create a program object and make current * @param gl GL context * @param vshader a vertex shader program (string) * @param fshader a fragment shader program (string) * @return true, if the program object was created and successfully made current */ function initShaders(gl, vshader, fshader) { var program = createProgram(gl, vshader, fshader); if (!program) { console.log('Failed to create program'); return false; } gl.useProgram(program); gl.program = program; return true; } /** * Create the linked program object * @param gl GL context * @param vshader a vertex shader program (string) * @param fshader a fragment shader program (string) * @return created program object, or null if the creation has failed */ function createProgram(gl, vshader, fshader) { // Create shader object var vertexShader = loadShader(gl, gl.VERTEX_SHADER, vshader); var fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fshader); if (!vertexShader || !fragmentShader) { return null; } // Create a program object var program = gl.createProgram(); if (!program) { return null; } // Attach the shader objects gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); // Link the program object gl.linkProgram(program); // Check the result of linking var linked = gl.getProgramParameter(program, gl.LINK_STATUS); if (!linked) { var error = gl.getProgramInfoLog(program); console.log('Failed to link program: ' + error); gl.deleteProgram(program); gl.deleteShader(fragmentShader); gl.deleteShader(vertexShader); return null; } return program; } /** * Create a shader object * @param gl GL context * @param type the type of the shader object to be created * @param source shader program (string) * @return created shader object, or null if the creation has failed. */ function loadShader(gl, type, source) { // Create shader object var shader = gl.createShader(type); if (shader == null) { console.log('unable to create shader'); return null; } // Set the shader program gl.shaderSource(shader, source); // Compile the shader gl.compileShader(shader); // Check the result of compilation var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS); if (!compiled) { var error = gl.getShaderInfoLog(shader); console.log('Failed to compile shader: ' + error); gl.deleteShader(shader); return null; } return shader; } /** * Initialize and get the rendering for WebGL * @param canvas <cavnas> element * @param opt_debug flag to initialize the context for debugging * @return the rendering context for WebGL */ function getWebGLContext(canvas, opt_debug) { // Get the rendering context for WebGL var gl = WebGLUtils.setupWebGL(canvas); if (!gl) return null; // if opt_debug is explicitly false, create the context for debugging if (arguments.length < 2 || opt_debug) { gl = WebGLDebugUtils.makeDebugContext(gl); } return gl; } //从这里开始 let canvas = document.getElementById("webgl"); let gl = canvas.getContext("webgl"); let VSHADER_SOURCE = 'attribute vec4 a_Position;'+ 'attribute vec2 a_TexCoord;' + 'varying vec2 v_TexCoord;' + 'void main(){'+ 'gl_Position = a_Position;'+ 'v_TexCoord = a_TexCoord;' + '}'; let FSHADER_SOURCE = 'precision mediump float;' + 'uniform sampler2D u_Sampler;' + 'varying vec2 v_TexCoord;' + 'void main() {' + ' gl_FragColor = texture2D(u_Sampler, v_TexCoord);' + '}'; initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE); let n = initVertexBuffers(gl); initTextures(gl, n); gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLES, 0, n); function initVertexBuffers(gl){ let verticesTexCoords = new Float32Array([ // Vertex coordinates and color -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, ]); let n = 4; //画多少个顶点 let vertexTexCoordBuffer = gl.createBuffer(); //先按一个规则读一遍 gl.bindBuffer(gl.ARRAY_BUFFER, vertexTexCoordBuffer); gl.bufferData(gl.ARRAY_BUFFER, verticesTexCoords, gl.STATIC_DRAW); let FSIZE = verticesTexCoords.BYTES_PER_ELEMENT; let a_Position = gl.getAttribLocation(gl.program, 'a_Position'); gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 4, 0);//单缓存区解决 gl.enableVertexAttribArray(a_Position); let 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 texture = gl.createTexture(); // Create a texture object if (!texture) { console.log('Failed to create the texture object'); return false; } // Get the storage location of u_Sampler var u_Sampler = gl.getUniformLocation(gl.program, 'u_Sampler'); if (!u_Sampler) { console.log('Failed to get the storage location of u_Sampler'); return false; } var image = new Image(); // Create the image object if (!image) { console.log('Failed to create the image object'); return false; } // Register the event handler to be called on loading an image image.onload = function(){ loadTexture(gl, n, texture, u_Sampler, image); }; // Tell the browser to load an image image.src = 'http://ouib5enmf.bkt.clouddn.com/Test4.png'; return true; } function loadTexture(gl, n, texture, u_Sampler, image) { gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1); // Flip the image's y axis // Enable texture unit0 gl.activeTexture(gl.TEXTURE0); // Bind the texture object to the target gl.bindTexture(gl.TEXTURE_2D, texture); // Set the texture parameters gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); // Set the texture image gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image); // Set the texture unit 0 to the sampler gl.uniform1i(u_Sampler, 0); gl.clear(gl.COLOR_BUFFER_BIT); // Clear <canvas> gl.drawArrays(gl.TRIANGLE_STRIP, 0, n); // Draw the rectangle }
<canvas id="webgl" width="400" height="400"></canvas>