const positions = new Float32Array ( [ 1.0 , - 1.0 , 0.0 , - 1.0 , - 1.0 , 0.0 , 0.0 , 1.0 , 0.0 ] ) ; const colors = new Float32Array ( [ 1.0 , 0.0 , 0.0 , 0.0 , 1.0 , 0.0 , 0.0 , 0.0 , 1.0 ] ) ; const indices = new Uint16Array ( [ 0 , 1 , 2 ] ) ; const vertShaderCode = `
attribute vec3 inPosition;
attribute vec3 inColor;

varying vec3 vColor;

void main()
{
    vColor = inColor;
    gl_Position = vec4(inPosition, 1.0);
}
` ; const fragShaderCode = `
precision mediump float;

varying highp vec3 vColor;

void main()
{
    gl_FragColor = vec4(vColor, 1.0);
}
` ; /*************************************************************/ export default class Renderer { canvas : HTMLCanvasElement ; gl : WebGLRenderingContext ; animationHandler : number ; positionBuffer : WebGLBuffer ; colorBuffer : WebGLBuffer ; indexBuffer : WebGLBuffer ; vertModule : WebGLShader ; fragModule : WebGLShader ; program : WebGLProgram ; constructor ( canvas ) { this . canvas = canvas ; } start ( ) { this . initializeAPI ( ) ; this . initializeResources ( ) ; this . render ( ) ; } initializeAPI ( ) { var gl = this . canvas . getContext ( 'webgl' ) ; if ( ! gl ) { throw new Error ( 'WebGL failed to initialize.' ) ; } this . gl = gl ; gl . clearColor ( 0.0 , 0.0 , 0.0 , 0.0 ) ; gl . colorMask ( true , true , true , true ) ; gl . enable ( gl . DEPTH_TEST ) ; gl . depthFunc ( gl . LEQUAL ) ; gl . cullFace ( gl . BACK ) ; gl . blendFunc ( gl . SRC_ALPHA , gl . ONE_MINUS_SRC_ALPHA ) ; } initializeResources ( ) { let gl = this . gl ; let createBuffer = ( arr ) => { let buf = gl . createBuffer ( ) ; let bufType = arr instanceof Uint16Array || arr instanceof Uint32Array ? gl . ELEMENT_ARRAY_BUFFER : gl . ARRAY_BUFFER ; gl . bindBuffer ( bufType , buf ) ; gl . bufferData ( bufType , arr , gl . STATIC_DRAW ) ; return buf ; } ; this . positionBuffer = createBuffer ( positions ) ; this . colorBuffer = createBuffer ( colors ) ; this . indexBuffer = createBuffer ( indices ) ; let createShader = ( source , stage ) => { let s = gl . createShader ( stage ) ; gl . shaderSource ( s , source ) ; gl . compileShader ( s ) ; if ( ! gl . getShaderParameter ( s , gl . COMPILE_STATUS ) ) { console . error ( 'An error occurred compiling the shader: ' + gl . getShaderInfoLog ( s ) ) ; } return s ; } ; this . vertModule = createShader ( vertShaderCode , gl . VERTEX_SHADER ) ; this . fragModule = createShader ( fragShaderCode , gl . FRAGMENT_SHADER ) ; let createProgram = ( stages ) => { let p = gl . createProgram ( ) ; for ( let stage of stages ) { gl . attachShader ( p , stage ) ; } gl . linkProgram ( p ) ; return p ; } ; this . program = createProgram ( [ this . vertModule , this . fragModule ] ) ; } render = ( ) => { var gl = this . gl ; gl . clear ( gl . COLOR_BUFFER_BIT | gl . DEPTH_BUFFER_BIT ) ; gl . useProgram ( this . program ) ; gl . viewport ( 0 , 0 , this . canvas . width , this . canvas . height ) ; gl . scissor ( 0 , 0 , this . canvas . width , this . canvas . height ) ; let setVertexBuffer = ( buf , name ) => { gl . bindBuffer ( gl . ARRAY_BUFFER , buf ) ; let loc = gl . getAttribLocation ( this . program , name ) ; gl . vertexAttribPointer ( loc , 3 , gl . FLOAT , false , 4 * 3 , 0 ) ; gl . enableVertexAttribArray ( loc ) ; } ; setVertexBuffer ( this . positionBuffer , 'inPosition' ) ; setVertexBuffer ( this . colorBuffer , 'inColor' ) ; gl . bindBuffer ( gl . ELEMENT_ARRAY_BUFFER , this . indexBuffer ) ; gl . drawElements ( gl . TRIANGLES , 3 , gl . UNSIGNED_SHORT , 0 ) ; this . animationHandler = requestAnimationFrame ( this . render ) ; } ; destroyResources ( ) { var gl = this . gl ; gl . deleteBuffer ( this . positionBuffer ) ; gl . deleteBuffer ( this . colorBuffer ) ; gl . deleteBuffer ( this . indexBuffer ) ; gl . deleteShader ( this . vertModule ) ; gl . deleteShader ( this . fragModule ) ; gl . deleteProgram ( this . program ) ; } stop ( ) { cancelAnimationFrame ( this . animationHandler ) ; this . destroyResources ( ) ; } }