Geekly Articles each Day
⬆️ ⬇️

Dart + WebGL do cookies on the dark side taste good?



The history of web application development is very much like the life of Anaken Skywalker. About 15 years ago they were weak and clumsy. But as time passed, testosterone hit in the head and our “Anaken” falls into the red-hot lava of requirements for the quality and functionality of browser programs. With his only surviving javascript, he rakes the ground beneath him. Here the attentive reader will notice that we will not crawl away this way. Unexpected, but in fact, quite natural plot twist and the savior Dart appears on the scene. Let's try to stand on his side.



Why Dart, simply because it is typed and it has a C-like syntax. In addition, Google is developing VirtualMachine for Dart, which in the future could provide a significant advantage in the performance of this language.



Why WebGL, because this technology, like Dart, is at the forefront, and 3D in the browser, in my opinion, is a very interesting topic.



There is no point in expecting from the browser technology of the quality of board games. WebGL is OpenGL 2.0, which means we have only vertex and fragment shaders in our hands, which means that the quality of the picture will lag behind board games by about 5 years. For the masters of their craft, this is not an obstacle, the tanks online proved this, and even in the hands of the creators of the first tanks it was not.

')

First we need an IDE Dart editor. It can be downloaded from the official website www.dartlang.org

At the heart of this IDE is, to many familiar, Eclipse, therefore, it is desirable to download a version of the bit that you have installed Java. Otherwise, it will not be able to start.



Create a new project: File-> New application. 

import 'dart:html'; void main() { }


This is the minimum bundle of the application on Dart. The rest can be safely removed.

To get an element from the page with a specific id, you need to call the querySelector function like this:

var someElement = querySelector (“# someid”);

Let's take a look at the minimum html file that we will use for experiments: 

 <!DOCTYPE html> <html> <body> <!--      --> <p id="status"></p> <!--    --> <canvas id="canvas3d" width="800" height="600"></canvas> <!--      --> <script src="Simple.dart" type="application/dart"></script> <script src="packages/browser/dart.js"></script> </body> </html>




This is how the code on Dart will look like to display a short message on the page: 

 import 'dart:html'; void main() { var status = querySelector('#status'); status.innerHtml = '<p>    Dart.</p>'; }


You can check the operation by clicking the start button:



And compile for publishing to the web - right-click on the dart file in the window with the project file tree and click “Run as JavaScript”:



To display 3D graphics, we need to get a 3D context from the canvas on which we will draw. 

 //  canvas = document.querySelector('#canvas3d'); // webGl     gl = (canvas.getContext("webgl")!=null)?canvas.getContext("webgl") : canvas.getContext("experimental-webgl");


If after this request, gl is null, then the browser does not support webGl. 

 if (gl == null) { status.innerHtml = '<p>,     WebGl</p>'; }


After receiving the context, it is necessary to initialize it, passing the horizontal shift, vertical shift, width and height of the display frame as parameters: 

 gl.viewport(0, 0, canvas.width, canvas.height);


To display at least something on the canvas, you need to load two shaders, one vertex and one fragment (it's a pixel). 

 //  String vsSource = """ attribute vec3 aPosition; void main() { gl_Position = vec4(aPosition, 1); }"""; //   String fsSource = """ precision mediump float; uniform vec4 uColor; void main() { gl_FragColor = uColor; }"""; // ,        . // WebGLShader vs = gl.createShader(WebGLRenderingContext.VERTEX_SHADER); gl.shaderSource(vs, vsSource); gl.compileShader(vs); WebGLShader fs = gl.createShader(WebGLRenderingContext.FRAGMENT_SHADER); gl.shaderSource(fs, fsSource); gl.compileShader(fs); //    GPU WebGLProgram p = gl.createProgram(); gl.attachShader(p, vs); gl.attachShader(p, fs); gl.linkProgram(p); gl.useProgram(p); //    . if (!gl.getShaderParameter(vs, WebGLRenderingContext.COMPILE_STATUS)) { print(gl.getShaderInfoLog(vs)); } if (!gl.getShaderParameter(fs, WebGLRenderingContext.COMPILE_STATUS)) { print(gl.getShaderInfoLog(fs)); } if (!gl.getProgramParameter(p, WebGLRenderingContext.LINK_STATUS)) { print(gl.getProgramInfoLog(p)); }


The print command prints information to the debugging console of the IDE used. If something went wrong, then the reasons can be read.

Now we need to load the vertex buffer into the GPU: 

 //     Float32List vertices = new Float32List.fromList([ -0.4, 0.4, 1.0, 0.4, 0.4, 1.0, -0.4, -0.4, 1.0]); //       gl.bindBuffer(WebGLRenderingContext.ARRAY_BUFFER, gl.createBuffer()); gl.bufferDataTyped(WebGLRenderingContext.ARRAY_BUFFER, vertices, WebGLRenderingContext.STATIC_DRAW); //    int numItems = 3; //  ,       int aPosition = gl.getAttribLocation(program, "aPosition"); gl.enableVertexAttribArray(aPosition); gl.vertexAttribPointer(aPosition, 3, WebGLRenderingContext.FLOAT, false, 0, 0); //     (RedGreenBlueAlpha) gl.clearColor(0.9, 0.9, 0.9, 1); gl.clear(WebGLRenderingContext.COLOR_BUFFER_BIT); //  ,      WebGLUniformLocation uColor = gl.getUniformLocation(program, "uColor"); //          RGBA gl.uniform4fv(uColor, new Float32List.fromList([0.5, 0.9, 0.9, 1.0]));


The only thing left to do is to give the draw command: 

 gl.drawArrays(WebGLRenderingContext.TRIANGLES, 0, numItems);


Now you can run the project and look at the result:



You can download the whole source dart file here: dl.dropbox.com/u/41059365/Simple.dart

The purpose of this article was to show that Dart can be the same as JS, but more convenient. Static typing and autocompletion greatly reduce development time, making it possible to keep unnecessary information in mind. These and other buns are well told in the video, the link in the first comment.



Our Sith is still young, but he is rapidly changing and growing up. WebGl is getting stronger with it, albeit a bit slower. Comparing Dart and JS, I would like to express my deepest respect for those who are able to write really complex projects on the second one. The number of third-party libraries for Dart in a disproportionately smaller number than for JS, but the language and tools attached to it are so good that for new projects it will not rust. And step by step debugging of the code, this is a treasure for novice programmers. Cookies on the side of Dart and soon he will become the ruler of the entire Internet.

Source: https://habr.com/ru/post/161785/

More articles:



All Articles