WebGL使い試し

そういえばブログ文中に
3D描画するものを埋め込むことができるのかな..

と思ったので WebGLの勉強がてら 試しにやってみる

結果

---

いけるっぽい

ソース

---

<p id="my_canvas_anchor"></p>

<!-- 
頂点シェーダ 
-->
<script id="vShader" type="text/plain">// <![CDATA[
attribute vec2 position;
void main ()
{
    gl_Position = vec4(position, 1.0, 1.0);
}
// ]]></script>

<!-- 
ピクセルシェーダ 
-->
<script id="pShader" type="text/plain">// <![CDATA[
precision mediump float;
void main ()
{
    gl_FragColor = vec4 (1.0);
}
// ]]></script>

<!-- 
ここからスクリプト 
-->
<script type="text/javascript">// <![CDATA[
function Sample()
{
    const canvasSize = 280;
    
    // canvas の追加
    const anchor = document.getElementById("my_canvas_anchor");
    const canvas = document.createElement('canvas');
    canvas.id = "my_canvas"; 
    canvas.width = canvasSize;
    canvas.height = canvasSize;
    anchor.parentNode.insertBefore(canvas, anchor);

    const gl = canvas.getContext('webgl', null);
    if(gl == null)
    {
        anchor.innerHTML = "Error:WebGLの初期化に失敗しました";
        return;
    }
    gl.viewport(0, 0, canvasSize, canvasSize);    
    
    // シェーダ準備
    const vsElem = document.getElementById ('vShader');
    const vShader = gl.createShader( gl.VERTEX_SHADER );
    gl.shaderSource( vShader, vsElem.text );
    gl.compileShader( vShader );
    
    const psElem = document.getElementById ('pShader');
    const pShader = gl.createShader( gl.FRAGMENT_SHADER );
    gl.shaderSource( pShader, psElem.text );
    gl.compileShader( pShader );
    
    const shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vShader);
    gl.attachShader(shaderProgram, pShader);
    gl.linkProgram(shaderProgram);
    
    if (gl.getProgramParameter(shaderProgram, gl.LINK_STATUS) == false) 
    {
        anchor.innerHTML = "Error:シェーダの生成に失敗しました";
        return;
    }
    
    // ポリゴン準備
    const posnBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, posnBuffer);
    
    var position = [
      0,    0.5,
      -0.5, -0.5,
      0.5 , -0.5
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array (position), gl.STATIC_DRAW);
    
    // 描画
    gl.clearColor (0.8, 0.9, 1.0, 1.0);
    gl.clear (gl.COLOR_BUFFER_BIT);
    
    const vsPosAttribute = gl.getAttribLocation(shaderProgram, "position");
    gl.vertexAttribPointer(vsPosAttribute, 2, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(vsPosAttribute);

    gl.useProgram(shaderProgram);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);
}
Sample();
// ]]></script>

参考にしたサイトさん

---

https://developer.mozilla.org/ja/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL

https://www.shibuya24.info/entry/2015/07/28/200310

http://webos-goodies.jp/archives/getting_started_with_webgl.html