opengl - How do I render a 2D Sprite using WebGL? -
i'm struggling render 2d sprite canvas using dart , webgl. can find few examples of online; either 3d, or contain tons of spaghetti code no real explanation of they're doing. i'm trying simplest thing renders sprite.
so far, i've managed render greenish square (two triangles) on canvas. bit i'm struggling with, how alter greenish square using texture (the texture loaded , bound correctly, believe). think need changes shaders (to take texture co-ords, instead of colour) , pass texture coords relating vertices in buffer.
this code also exists in gist.
note: throwaway sample; of code lives in constructor; i'm not interested in how tidy code now; can tidy when can see sprite on screen!
note: i'm not interested in using third-party library; i'm doing larn webgl!
<!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 programme = _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() { // utilize sine curve fading. sine -1-1, tweak 0 - 1. fadeamount = (sin(elapsedtime/1000) / 2) + 0.5; } _render() { // set colour 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> (tagging opengl because believe solution same webgl/opengl).
ok, managed create work. can see total diff in gist here.
i might wrong; seems expecting set info in buffers while setting them up; couldn't find way info buffer. split code setup code:
vbuffer = _gl.createbuffer(); _gl.bindbuffer(array_buffer, vbuffer); _gl.bufferdata(array_buffer, vertices, static_draw); numitems = vertices.length ~/ 2; tbuffer = _gl.createbuffer(); _gl.bindbuffer(array_buffer, tbuffer); _gl.bufferdata(array_buffer, texturecoords, static_draw); avertexposition = _gl.getattriblocation(program, "avertexposition"); _gl.enablevertexattribarray(avertexposition); atexturecoord = _gl.getattriblocation(program, "atexturecoord"); _gl.enablevertexattribarray(atexturecoord); usampler = _gl.getuniformlocation(program, "usampler"); and rendering code:
_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); i'm not exclusively sure if right (it feels i'm sending same vertex , texturecoord every frame), it's working.
opengl opengl-es html5-canvas dart webgl
No comments:
Post a Comment