Last active
September 4, 2023 09:05
-
-
Save m-decoster/ec44495badb54c26bb1c to your computer and use it in GitHub Desktop.
A simple WebGL application in Dart to get you started.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| library webglapp; | |
| import 'dart:typed_data'; | |
| import 'dart:html'; | |
| import 'dart:web_gl'; | |
| import 'dart:async'; | |
| CanvasElement canvas = document.getElementById("gameCanvas"); | |
| RenderingContext gl; | |
| String vertexShaderSrc = """ | |
| attribute vec2 position; | |
| void main() { | |
| gl_Position = vec4(position, 0.0, 1.0); | |
| } | |
| """; | |
| String fragmentShaderSrc = """ | |
| precision mediump float; | |
| void main() { | |
| gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); | |
| } | |
| """; | |
| Float32List vertices = new Float32List.fromList([ | |
| -0.5, 0.5, | |
| 0.0, -0.5, | |
| 0.5, 0.5 | |
| ]); | |
| void error(String errorStr) | |
| { | |
| document.getElementById("errorDiv").appendHtml("<p>$errorStr</p>"); | |
| } | |
| void initGL() | |
| { | |
| gl.clearColor(0.0, 0.0, 0.0, 1.0); | |
| gl.viewport(0, 0, canvas.width, canvas.height); | |
| // Compile shaders and link | |
| Shader vs = gl.createShader(RenderingContext.VERTEX_SHADER); | |
| gl.shaderSource(vs, vertexShaderSrc); | |
| gl.compileShader(vs); | |
| Shader fs = gl.createShader(RenderingContext.FRAGMENT_SHADER); | |
| gl.shaderSource(fs, fragmentShaderSrc); | |
| gl.compileShader(fs); | |
| Program program = gl.createProgram(); | |
| gl.attachShader(program, vs); | |
| gl.attachShader(program, fs); | |
| gl.linkProgram(program); | |
| gl.useProgram(program); | |
| /** | |
| * Check if shaders were compiled properly | |
| */ | |
| if (!gl.getShaderParameter(vs, RenderingContext.COMPILE_STATUS)) { | |
| error(gl.getShaderInfoLog(vs)); | |
| } | |
| if (!gl.getShaderParameter(fs, RenderingContext.COMPILE_STATUS)) { | |
| error(gl.getShaderInfoLog(fs)); | |
| } | |
| if (!gl.getProgramParameter(program, RenderingContext.LINK_STATUS)) { | |
| error(gl.getProgramInfoLog(program)); | |
| } | |
| // Create vbo | |
| Buffer vbo = gl.createBuffer(); | |
| gl.bindBuffer(RenderingContext.ARRAY_BUFFER, vbo); | |
| gl.bufferData(RenderingContext.ARRAY_BUFFER, vertices, RenderingContext.STATIC_DRAW); | |
| int posAttrib = gl.getAttribLocation(program, "position"); | |
| gl.enableVertexAttribArray(0); | |
| gl.vertexAttribPointer(posAttrib, 2, RenderingContext.FLOAT, false, 0, 0); | |
| } | |
| render(num delta) | |
| { | |
| gl.clear(RenderingContext.COLOR_BUFFER_BIT); | |
| // draw | |
| gl.drawArrays(RenderingContext.TRIANGLES, 0, 3); | |
| // redraw when ready | |
| window.animationFrame.then(render); | |
| } | |
| void main() | |
| { | |
| gl = canvas.getContext3d(); | |
| if(gl == null) | |
| { | |
| error("Your browser doesn't seem to support WebGL."); | |
| return; | |
| } | |
| initGL(); | |
| window.animationFrame.then(render); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>WebGL</title> | |
| <link rel="stylesheet" href="webgl.css"> | |
| </head> | |
| <body> | |
| <h1>WebGL</h1> | |
| <div id="errorDiv"> | |
| </div> | |
| <canvas id="gameCanvas" width="500" height="500"></canvas> | |
| <script type="application/dart" src="webgl.dart"></script> | |
| <script src="packages/browser/dart.js"></script> | |
| </body> | |
| </html> |
Hi. I wrote this code 8 years ago, 4 years before flutter's initial release.
As a result, I don't remember how I ran it. I guess from looking at the code I used a packaged version of dart.js and served the HTML page with a simple HTTP server.
No worries, completely understand. A friend of mine turned me on to flutter this year, so just getting around to checking it out now. Pretty cool stuff. Cheers!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I'm new to flutter and dart, can I ask how you build and run this? Is it with webdev, or do you run it some other way? Thx!