Skip to content

Instantly share code, notes, and snippets.

@DanTup

DanTup/WebGL2DSprite.html

Last active July 28, 2022 01:53
Download ZIP

Revisions

  1. DanTup revised this gist Oct 5, 2014. 1 changed file with 35 additions and 9 deletions.
    44 changes: 35 additions & 9 deletions WebGL2DSprite.html
    View file
    Original file line number Diff line number Diff line change
    @@ -44,12 +44,16 @@

    class Game {
    RenderingContext _gl;
    Buffer vbuffer;
    Buffer vbuffer, tbuffer;
    int numItems;
    Texture playerTexture;
    double elapsedTime;
    double fadeAmount;

    Float32List vertices, textureCoords;
    int aVertexPosition, aTextureCoord;
    UniformLocation uSampler;

    Game(CanvasElement canvas) {
    _gl = canvas.getContext3d();
    playerTexture = _gl.createTexture();
    @@ -84,25 +88,40 @@
    if (!_gl.getProgramParameter(program, LINK_STATUS))
    print(_gl.getProgramInfoLog(program));

    _gl.useProgram(program);

    var aspect = canvas.width / canvas.height;
    var vertices = new Float32List.fromList([
    vertices = new Float32List.fromList([
    -0.5, 0.5 * aspect, 0.5, 0.5 * aspect, 0.5, -0.5 * aspect, // Triangle 1
    -0.5, 0.5 * aspect, 0.5,-0.5 * aspect, -0.5, -0.5 * aspect // Triangle 2
    ]);

    textureCoords = new Float32List.fromList([
    0.0, 0.0,
    1.0, 0.0,
    1.0, 1.0,
    0.0, 0.0,
    1.0, 1.0,
    0.0, 1.0,
    ]);

    vbuffer = _gl.createBuffer();
    _gl.bindBuffer(ARRAY_BUFFER, vbuffer);
    _gl.bindBuffer(ARRAY_BUFFER, vbuffer);
    _gl.bufferData(ARRAY_BUFFER, vertices, STATIC_DRAW);
    numItems = vertices.length ~/ 2;

    _gl.useProgram(program);
    var uColor = _gl.getUniformLocation(program, "uColor");
    _gl.uniform4fv(uColor, new Float32List.fromList([0.0, 0.3, 0.0, 1.0]));
    tbuffer = _gl.createBuffer();
    _gl.bindBuffer(ARRAY_BUFFER, tbuffer);
    _gl.bufferData(ARRAY_BUFFER, textureCoords, STATIC_DRAW);

    var aVertexPosition = _gl.getAttribLocation(program, "aVertexPosition");
    aVertexPosition = _gl.getAttribLocation(program, "aVertexPosition");
    _gl.enableVertexAttribArray(aVertexPosition);
    _gl.vertexAttribPointer(aVertexPosition, 2, FLOAT, false, 0, 0);

    aTextureCoord = _gl.getAttribLocation(program, "aTextureCoord");
    _gl.enableVertexAttribArray(aTextureCoord);

    uSampler = _gl.getUniformLocation(program, "uSampler");

    window.animationFrame.then(_gameLoop);
    }

    @@ -124,9 +143,16 @@
    // Clear.
    _gl.clear(RenderingContext.COLOR_BUFFER_BIT);

    _gl.bindBuffer(ARRAY_BUFFER, vbuffer);
    _gl.vertexAttribPointer(aVertexPosition, 2, FLOAT, false, 0, 0);

    _gl.bindBuffer(ARRAY_BUFFER, tbuffer);
    _gl.vertexAttribPointer(aTextureCoord, 2, FLOAT, false, 0, 0);

    _gl.bindTexture(TEXTURE_2D, playerTexture);
    _gl.uniform1i(uSampler, 0);

    _gl.drawArrays(TRIANGLES, 0, numItems);
    _gl.bindTexture(TEXTURE_2D, null);
    }
    }
    </script>
  2. DanTup created this gist Oct 5, 2014.
    135 changes: 135 additions & 0 deletions WebGL2DSprite.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,135 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>MySecondGame</title>
    </head>
    <body>
    <canvas width="1024" height="768"></canvas>

    <div style="display: none;">
    <img id="img-player" src="assets/player.png" />
    </div>

    <script id="vertex" type="x-shader">
    attribute vec2 aVertexPosition;

    void main() {
    gl_Position = vec4(aVertexPosition, 0.0, 1.0);
    }
    </script>
    <script id="fragment" type="x-shader">
    #ifdef GL_ES
    precision highp float;
    #endif

    uniform vec4 uColor;

    void main() {
    gl_FragColor = uColor;
    }
    </script>

    <script type="application/dart">
    import 'dart:async';
    import 'dart:html';
    import 'dart:math';
    import 'dart:typed_data';
    import 'dart:web_gl';

    Game game;

    main() {
    game = new Game(document.querySelector('canvas'));
    }

    class Game {
    RenderingContext _gl;
    Buffer vbuffer;
    int numItems;
    Texture playerTexture;
    double elapsedTime;
    double fadeAmount;

    Game(CanvasElement canvas) {
    _gl = canvas.getContext3d();
    playerTexture = _gl.createTexture();
    _gl.bindTexture(TEXTURE_2D, playerTexture);
    _gl.texImage2DUntyped(TEXTURE_2D, 0, RGBA, RGBA, UNSIGNED_BYTE, document.querySelector('#img-player'));
    _gl.texParameteri(TEXTURE_2D, TEXTURE_MAG_FILTER, NEAREST);
    _gl.texParameteri(TEXTURE_2D, TEXTURE_MIN_FILTER, LINEAR_MIPMAP_NEAREST);
    _gl.generateMipmap(TEXTURE_2D);
    _gl.bindTexture(TEXTURE_2D, null);

    var vsScript = document.querySelector('#vertex');
    var vs = _gl.createShader(VERTEX_SHADER);
    _gl.shaderSource(vs, vsScript.text);
    _gl.compileShader(vs);

    var fsScript = document.querySelector('#fragment');
    var fs = _gl.createShader(FRAGMENT_SHADER);
    _gl.shaderSource(fs, fsScript.text);
    _gl.compileShader(fs);

    var program = _gl.createProgram();
    _gl.attachShader(program, vs);
    _gl.attachShader(program, fs);
    _gl.linkProgram(program);

    if (!_gl.getShaderParameter(vs, COMPILE_STATUS))
    print(_gl.getShaderInfoLog(vs));

    if (!_gl.getShaderParameter(fs, COMPILE_STATUS))
    print(_gl.getShaderInfoLog(fs));

    if (!_gl.getProgramParameter(program, LINK_STATUS))
    print(_gl.getProgramInfoLog(program));

    var aspect = canvas.width / canvas.height;
    var vertices = new Float32List.fromList([
    -0.5, 0.5 * aspect, 0.5, 0.5 * aspect, 0.5, -0.5 * aspect, // Triangle 1
    -0.5, 0.5 * aspect, 0.5,-0.5 * aspect, -0.5, -0.5 * aspect // Triangle 2
    ]);

    vbuffer = _gl.createBuffer();
    _gl.bindBuffer(ARRAY_BUFFER, vbuffer);
    _gl.bufferData(ARRAY_BUFFER, vertices, STATIC_DRAW);
    numItems = vertices.length ~/ 2;

    _gl.useProgram(program);
    var uColor = _gl.getUniformLocation(program, "uColor");
    _gl.uniform4fv(uColor, new Float32List.fromList([0.0, 0.3, 0.0, 1.0]));

    var aVertexPosition = _gl.getAttribLocation(program, "aVertexPosition");
    _gl.enableVertexAttribArray(aVertexPosition);
    _gl.vertexAttribPointer(aVertexPosition, 2, FLOAT, false, 0, 0);

    window.animationFrame.then(_gameLoop);
    }

    _gameLoop(num time) {
    elapsedTime = time;
    _update();
    _render();
    window.animationFrame.then(_gameLoop);
    }

    _update() {
    // Use sine curve for fading. Sine is -1-1, so tweak to be 0 - 1.
    fadeAmount = (sin(elapsedTime/1000) / 2) + 0.5;
    }

    _render() {
    // Set colour for clearing to.
    _gl.clearColor(fadeAmount, 1 - fadeAmount, 0.0, 1.0);
    // Clear.
    _gl.clear(RenderingContext.COLOR_BUFFER_BIT);

    _gl.bindTexture(TEXTURE_2D, playerTexture);
    _gl.drawArrays(TRIANGLES, 0, numItems);
    _gl.bindTexture(TEXTURE_2D, null);
    }
    }
    </script>
    <script src="packages/browser/dart.js"></script>
    </body>
    </html>