JSFiddle - React, Tailwind, and code Playground

by soulwire

HTML

<script id="vs" type="x-shader">
    attribute vec2 aPosition;
    void main() {
        gl_Position = vec4( aPosition, 0, 1 );
    }
</script>
<script id="fs" type="x-shader">
    void main() {
        gl_FragColor = vec4(1,0,1,1);
    }
</script>
<canvas id="canvas" width="500" height="500"></canvas>

JavaScript

var canvas = document.getElementById( 'canvas' );
var gl = canvas.getContext( 'webgl' );

var vs = gl.createShader( gl.VERTEX_SHADER );
gl.shaderSource( vs, document.getElementById( 'vs' ).textContent );
gl.compileShader( vs );

var fs = gl.createShader( gl.FRAGMENT_SHADER );
gl.shaderSource( fs, document.getElementById( 'fs' ).textContent );
gl.compileShader( fs );

var prog = gl.createProgram();
gl.attachShader( prog, vs );
gl.attachShader( prog, fs );
gl.linkProgram( prog );
gl.useProgram( prog );

prog.aPosition = gl.getAttribLocation( prog, 'aPosition' );

var vertices = new Float32Array([
    -0.5, -0.5,
    0.5, -0.5,
    -0.5,  0.5,
    0.5,  0.5
]);

var vbo = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, vbo );
gl.bufferData( gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW );
gl.vertexAttribPointer( prog.aPosition, 2, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( prog.aPosition );

gl.clear( gl.COLOR_BUFFER_BIT );
gl.drawArrays( gl.TRIANGLE_STRIP, 0, 4 );


/*

https://www.allegro.cc/forums/thread/399478/399577
http://gamedev.stackexchange.com/questions/59361/opengl-get-the-outline-of-multiple-overlapping-objects

gl.clearStencil(0);
gl.clear( gl.STENCIL_BUFFER_BIT );

gl.enable( gl.STENCIL_TEST );
gl.stencilFunc( gl.ALWAYS, 1, -1 );
gl.stencilOp( gl.KEEP, gl.KEEP, gl.REPLACE );

gl.uniform4f( program.uColor, 0, 0, 0, 1 );
gl.drawElements( gl.TRIANGLE_FAN, ibo.length, gl.UNSIGNED_SHORT, 0 );

gl.stencilFunc( gl.NOTEQUAL, 1, -1 );
gl.stencilOp( gl.KEEP, gl.KEEP, gl.REPLACE );

// gl.colorMask( 0, 0, 1, 1 );

gl.lineWidth(3);
gl.uniform4f( program.uColor, 1, 0, 1, 1 );
gl.drawElements( gl.LINE_STRIP, ibo.length, gl.UNSIGNED_SHORT, 0 );
*/