webgl 混合

先上例子

<!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>

 

posted @ 2019-03-24 15:14  wanhong  阅读(349)  评论(0)  编辑  收藏  举报