• 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>
  • 相关阅读:
    模板插件aTpl
    KFold交叉验证方式
    XGboost数据比赛实战
    机器学习特征选择方法
    机器学习项目实战
    python二维表格数据的导入与导出
    centos-linux系统如何进入root权限?
    centos7解决yum install mysql-server没有可用包?
    Keras实现简单分类神经网络
    MySQL学习入门总结(非常重要)
  • 原文地址:https://www.cnblogs.com/honghong87/p/9758936.html
Copyright © 2020-2023  润新知