javascript 生的WebGL最小コード

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript 生的WebGL最小コード相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <title>mingl</title>
        <meta charset="UTF-8">
        <script type="text/javascript" src="script.js"></script>
        <script id="vs" type="x-shader/vertex">
attribute vec3 pos;
void main()
{
    gl_Position = vec4(pos, 1.0);
}
        </script>
        
        <script id="fs" type="x-shader/fragment">
void main()
{
    gl_FragColor = vec4(1,0,0,1);
}            
        </script>
    </head>
    <body>
        <canvas id='canvas'></canvas>
    </body>
</html>

window.onload = function()
{
    var canvas = document.getElementById('canvas');
    canvas.width = canvas.height = 300;
    var gl = canvas.getContext('webgl');
    var vsObj = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vsObj, document.getElementById('vs').text);
    gl.compileShader(vsObj);
    
    var fsObj = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fsObj, document.getElementById('fs').text);
    gl.compileShader(fsObj);
    
    var prog = gl.createProgram();
    gl.attachShader(prog, vsObj);
    gl.attachShader(prog, fsObj);
    
    gl.linkProgram(prog);
    
    if (gl.getProgramParameter(prog, gl.LINK_STATUS)==false)
    {
        console.log(gl.getProgramInfoLog(prog));
        return;
    }
    gl.useProgram(prog);
    
    var positionAttr = gl.getAttribLocation(prog, "pos");
    
    var data =[
        0, 0.5, 0.5,
        -0.5, -0.5, 0,
        0.5, -0.5, -0.2
    ];
    
    var vbo = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
    
    gl.enableVertexAttribArray(positionAttr);
    gl.vertexAttribPointer(positionAttr, 3, gl.FLOAT, false, 0, 0);
    gl.bindBuffer(gl.ARRAY_BUFFER,null);
    
    gl.clearColor(0,0,0,1);
    gl.clear(gl.COLOR_BUFFER_BIT);
    
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);
};

以上是关于javascript 生的WebGL最小コード的主要内容，如果未能解决你的问题，请参考以下文章

自動化ツール（コード生成パターン抽出）

csharp シェーダのコンパイル部分コード

text 改变コード#memo

php WP PageNaviコード

csharp 三角形描画部分コード

text Emacs文字コード关系#memo