先上例子
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>Basic Draw Blend</title> <script id="shader-vs" type="x-shader/x-vertex"> attribute vec3 aPos; void main(void){ gl_Position = vec4(aPos, 1); } </script> <script id="shader-fs" type="x-shader/x-fragment"> void main(void) { gl_FragColor = vec4(1.0, 1.0, 1.0, 0.5); } </script> </head> <body> <canvas id="canvas" width="400" height="400" ></canvas> <script> var gl; var canvas = document.getElementById('canvas'); var glProgram = null; function getGLContext() { var glContextNames = ['webgl', 'experimental-webgl']; for (var i = 0; i < glContextNames.length; i ++) { try { gl = canvas.getContext(glContextNames[i]); } catch (e) {} if (gl) { gl.clearColor(74 / 255, 115 / 255, 94 / 255, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.viewport(0, 0, canvas.width, canvas.height); gl.enable(gl.BLEND); break; } } } function initShaders() { //get shader source var vs_source = document.getElementById('shader-vs').innerHTML, fs_source = document.getElementById('shader-fs').innerHTML; //compile shaders vertexShader = makeShader(vs_source, gl.VERTEX_SHADER); fragmentShader = makeShader(fs_source, gl.FRAGMENT_SHADER); //create program glProgram = gl.createProgram(); //attach and link shaders to the program gl.attachShader(glProgram, vertexShader); gl.attachShader(glProgram, fragmentShader); gl.linkProgram(glProgram); if (!gl.getProgramParameter(glProgram, gl.LINK_STATUS)) { alert("Unable to initialize the shader program."); } //use program gl.useProgram(glProgram); } function makeShader(src, type) { //compile the vertex shader var shader = gl.createShader(type); gl.shaderSource(shader, src); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { alert("Error compiling shader: " + gl.getShaderInfoLog(shader)); } return shader; } function setupBuffer(){ // vertex representing the triangle var vertex = [ -.5, -.3, 0, .5, -.3, 0, .5, .3, 0, -.5, -.3, 0, .5, .3, 0, -.5, .3, 0 ]; var vertexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertex), gl.STATIC_DRAW); var aVertexPosition = gl.getAttribLocation(glProgram, 'aPos'); // point the attribute to the currently bound vertex buffer. gl.vertexAttribPointer(aVertexPosition, 3, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(aVertexPosition); } function draw(){ gl.drawArrays(gl.TRIANGLES, 0, 6); } window.onload = function(){ getGLContext(); initShaders(); gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); // gl.blendFunc(gl.ONE_MINUS_SRC_COLOR, gl.DST_ALPHA); setupBuffer(); draw(); } </script> </body> </html>