Untitled

<script id="vs_src" type="x-shader/x-vertex">
    #version 300 es

    #define POSITION_LOCATION 0
    precision highp float;

    layout(location = POSITION_LOCATION) in vec3 position;
    uniform   mat4 mvpMatrix;

    void main(void){
        gl_Position = mvpMatrix * vec4(position, 1.0);
    }
</script>
<script id="fs_src" type="x-shader/x-vertex">
    #version 300 es

    precision highp float;

    out vec4 color;

    void main(void){
        color = vec4(1.0, 1.0, 1.0, 1.0);
    }
</script>
<script type="text/javascript">

    const POSITION_LOCATION = 0;

    onload = ()=>{
        // WebGLコンテキストの取得
        const gl = canvas.getContext('webgl2');

        // 画面の初期化
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        // vertex shaderのコンパイル
        const vshader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vshader, vs_src.innerText.slice(1));
        gl.compileShader(vshader);

        // コンパイルログ
        if(!gl.getShaderParameter(vshader, gl.COMPILE_STATUS))
            alert(gl.getShaderInfoLog(vshader));

        // fragment shaderのコンパイル
        const fshader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fshader, fs_src.innerText.slice(1));
        gl.compileShader(fshader);

        // コンパイルログ
        if(!gl.getShaderParameter(fshader, gl.COMPILE_STATUS))
            alert(gl.getShaderInfoLog(fshader));

        // プログラムオブジェクトの生成とシェーダの割り当て，リンク
        const program = gl.createProgram();
        gl.attachShader(program, vshader);
        gl.attachShader(program, fshader);
        gl.linkProgram(program);

        // シェーダのリンクが失敗ならエラー出力
        if(!gl.getProgramParameter(program, gl.LINK_STATUS))
            alert(gl.getProgramInfoLog(program));

        // プログラムの有効化
        gl.useProgram(program);

        // 頂点座標の決定
        const vertex_position = new Float32Array([   0.0, 1.0, 0.0,
                                                     1.0, 0.0, 0.0,
                                                    -1.0, 0.0, 0.0 ]);

        // バッファオブジェクトの生成，バインド，データの挿入
        const vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
        gl.bufferData(gl.ARRAY_BUFFER, vertex_position, gl.STATIC_DRAW);

        // inの有効化，登録
        gl.enableVertexAttribArray(POSITION_LOCATION);
        gl.vertexAttribPointer(POSITION_LOCATION, 3, gl.FLOAT, false, 0, 0);

        // 回転行列の作成
        const matrix = new Float32Array([    0.60,  0.00,  0.00,  0.00,
                                             0.00,  0.95, -0.32, -0.32,
                                             0.00, -0.32, -0.95, -0.95,
                                             0.00,  0.00,  2.97,  3.16 ]);

        // uniformLocationの取得，登録
        const uniLocation = gl.getUniformLocation(program, 'mvpMatrix');
        gl.uniformMatrix4fv(uniLocation, false, matrix);

        // モデルの描画，画面の更新
        gl.drawArrays(gl.TRIANGLES, 0, 3);
        gl.flush();
    };

</script>
<body style="margin:0;height:100%;">
<canvas id="canvas" width=640 height=480 style="width:100%;height:100%;">