Last active
August 21, 2020 06:39
-
-
Save tejainece/a4232f5c8e82d1fd3e3f921e27a608cb to your computer and use it in GitHub Desktop.
Dart: Drawing triangle using WebGL
This file contains 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"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="scaffolded-by" content="https://github.com/dart-lang/stagehand"> | |
| <title>Dart WebGL triangle</title> | |
| <style> | |
| @import url(https://fonts.googleapis.com/css?family=Roboto); | |
| html, body { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| font-family: 'Roboto', sans-serif; | |
| } | |
| canvas { | |
| width: 200px; | |
| height: 200px; | |
| } | |
| </style> | |
| <link rel="icon" href="favicon.ico"> | |
| <script defer src="main.dart.js"></script> | |
| </head> | |
| <body> | |
| <canvas></canvas> | |
| </body> | |
| </html> |
This file contains 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
| import 'dart:html'; | |
| import 'dart:typed_data'; | |
| import 'dart:web_gl'; | |
| void main() { | |
| final CanvasElement canvas = querySelector('canvas'); | |
| final RenderingContext2 ctx = canvas.getContext('webgl2'); | |
| ctx.viewport(0, 0, 200, 200); | |
| canvas.width = 200; | |
| canvas.height = 200; | |
| final vertexShader = ctx.createShader(WebGL.VERTEX_SHADER); | |
| ctx.shaderSource(vertexShader, ''' | |
| attribute vec2 position; | |
| void main() { | |
| gl_Position = vec4(position, 0, 1); | |
| } | |
| '''); | |
| ctx.compileShader(vertexShader); | |
| final fragmentShader = ctx.createShader(WebGL.FRAGMENT_SHADER); | |
| ctx.shaderSource(fragmentShader, ''' | |
| void main() { | |
| gl_FragColor = vec4(1.0, 0, 0, 1.0); | |
| } | |
| '''); | |
| ctx.compileShader(fragmentShader); | |
| final program = ctx.createProgram(); | |
| ctx.attachShader(program, vertexShader); | |
| ctx.attachShader(program, fragmentShader); | |
| ctx.linkProgram(program); | |
| if (!ctx.getShaderParameter(vertexShader, WebGL.COMPILE_STATUS)) { | |
| final msg = ctx.getShaderInfoLog(vertexShader); | |
| if (msg != null) { | |
| throw Exception('Compiling vertex shader failed: ' + msg); | |
| } | |
| } | |
| if (!ctx.getShaderParameter(fragmentShader, WebGL.COMPILE_STATUS)) { | |
| final msg = ctx.getShaderInfoLog(fragmentShader); | |
| if (msg != null) { | |
| throw Exception('Compiling fragment shader failed: ' + msg); | |
| } | |
| } | |
| if (!ctx.getProgramParameter(program, WebGL.LINK_STATUS)) { | |
| final msg = ctx.getProgramInfoLog(program); | |
| if (msg != null) { | |
| throw Exception('Linking program failed: ' + msg); | |
| } | |
| } | |
| ctx.useProgram(program); | |
| final positionBuffer = ctx.createBuffer(); | |
| ctx.bindBuffer(WebGL.ARRAY_BUFFER, positionBuffer); | |
| final positionLocation = ctx.getAttribLocation(program, 'position'); | |
| ctx.vertexAttribPointer(positionLocation, 2, WebGL.FLOAT, false, 0, 0); | |
| ctx.enableVertexAttribArray(positionLocation); | |
| void render() { | |
| ctx.clearColor(0.5, 0.5, 0.5, 1.0); | |
| ctx.clear(WebGL.COLOR_BUFFER_BIT); | |
| ctx.bufferData(WebGL.ARRAY_BUFFER, | |
| Float32List.fromList([1 , 0, -1, -1, -1, 0]), WebGL.STATIC_DRAW); | |
| ctx.drawArrays(WebGL.TRIANGLES, 0, 3); | |
| } | |
| void repeatRender() { | |
| render(); | |
| window.requestAnimationFrame((highResTime) { | |
| repeatRender(); | |
| }); | |
| } | |
| repeatRender(); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment