WebGLを使ってみる - マイペースなプログラミング日記

下記リンクを参考にWebGLを使ったプログラムを書いてみた。FirefoxとChromeの最新版で動作確認した
http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/

メインプログラムはほぼそのままだが、フラグメントシェーダーを少しいじった。x座標が150までは緑で150からは青で表示するようにしてみた

void main(){
    if(gl_FragCoord.x < 150.0){
        gl_FragColor = vec4(0, 1, 0, 1);
    }else{
        gl_FragColor = vec4(0, 0, 1, 1);
    }
}

<html>
  <head>
    <title></title>
    <script>
window.onload = function(){
    var canvas = document.getElementById("canvas");
    var gl = canvas.getContext("experimental-webgl");
    var vertexShader = createShader(gl, "2d-vertex-shader", gl.VERTEX_SHADER);
    var fragmentShader = createShader(gl, "2d-fragment-shader", gl.FRAGMENT_SHADER);
    
    program = createProgram(gl, vertexShader, fragmentShader);

    var positionLocation = gl.getAttribLocation(program, "a_position");
    var buffer = gl.createBuffer();
    
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(gl.ARRAY_BUFFER, 
        new Float32Array([
            -1.0, -1.0, 
             1.0, -1.0, 
            -1.0,  1.0, 
            -1.0,  1.0, 
             1.0, -1.0, 
             1.0,  1.0]), 
       gl.STATIC_DRAW);
       
    gl.enableVertexAttribArray(positionLocation);
    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);

    gl.drawArrays(gl.TRIANGLES, 0, 6);
}

function createShader(gl, shaderId, type) {
    var shader = gl.createShader(type);
    var source = document.getElementById(shaderId).innerHTML;
    
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    
    return shader;
}

function createProgram(gl, vertexShader, fragmentShader){
    var program = gl.createProgram();

    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);

    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
        alert(gl.getShaderInfoLog(vertexShader));
        alert(gl.getShaderInfoLog(fragmentShader));
    }
    
    gl.useProgram(program);
    
    return program;
}

    </script>
    
    <script id="2d-vertex-shader" type="x-shader/x-vertex">
attribute vec2 a_position;

void main(){
    gl_Position = vec4(a_position, 0, 1);
}
    </script>

    <script id="2d-fragment-shader" type="x-shader/x-fragment">
    
void main(){
    if(gl_FragCoord.x < 150.0){
        gl_FragColor = vec4(0, 1, 0, 1);
    }else{
        gl_FragColor = vec4(0, 0, 1, 1);
    }
}
      </script>
      
  </head>
  <body>
    <canvas id="canvas" width="300" height="300"></canvas>
  </body>
</html>