Developing Structured 3D Applications with Dart and WebGL

Transcript

1. Developing Structured 3D Applications with Dart and WebGL Don Olmstead Software Engineer | Dart Enthusiast
2. "Dart helps developers from all platforms build complex, high performance client apps for the modern web."
3. • What is Dart? • Why program in Dart? • Quick language tour • Demo • Wrapping Up Agenda
4. What is Dart? • Class-based ◦ Object oriented ◦ Single Inheritance • Supports ◦ Interfaces ◦ Abstract classes ◦ Generics • Dynamic ◦ Optional static typing • Single threaded ◦ Concurrency through Isolates • C-style syntax
5. Where does it run? • Server ◦ HTTP/WebSockets ◦ File I/O • Client ◦ Web browsers ▪ Dartium ▪ Compiles to Javascript ◦ Embed into applications
6. Why use Dart? The Good Parts The Definitive Guide 176 Pages 1100 Pages
7. JS isn't built for large applications • No support for third party libraries ◦ Lack of standard libraries • Difficult to determine structure of an application • 3D applications are complex to build!
8. Dart is built for large applications • Library support ◦ #import('Foo'); ◦ #library('Bar'); • Package management ◦ Dart package manager - pub ◦ Handles dependencies • Documentation generator ◦ Inline documentation ◦ Markdown for formatting
9. JS isn't sane • No type information • Automatic semicolon insertion • Concept of undefined • Variable hoisting function printName() { console.log('Hello, ' + name); var name = 'Bob'; } function printName() { var name; console.log('Hello, ' + name); name = 'Bob'; }
10. Dart is sane • Variables can be typed • No automatic semicolon insertion • No concept of undefined ◦ Uninitialized variables default to null • No variable hoisting
11. JS is slow • Overly flexible language ◦ Hard to optimize • Startup is time consuming • Allows you to shoot yourself in the foot ◦ eval()! ◦ Modifying a class at runtime
12. Performance impact function Vec2 { var x; var y; } var v0 = new Vec2(5, 8); v0.z = 34;
13. Dart is fast • Easier to optimize ◦ Removes constructs that don't perform well • Quicker startup ◦ Snapshots • Guided by experience building web applications ◦ Google applications ◦ Chrome and V8
14. Language Tour - Variables var myName = 'Don'; // Dart variables can be typed... String myName = 'Don'; // but they don't need to be var myOtherName = 'Don'; var myName; // == undefined var myName; // == null int x; // == null // no support final name = 'Bob'; final String name = 'Bob'; // Raises an error name = 'Alice';
15. Language tour - Classes function Person(name) { this.name = name; } Person.prototype.greet = function() { return 'Hello, ' + this.name; } function Employee(name, salary) { Person.call(this, name); this.salary = salary; } Employee.prototype = new Person(); Employee.prototype.constructor = Employee; Employee.prototype.grantRaise = function (percent) { this.salary = (this.salary * percent). toInt(); } class Person { var name; Person(this.name); greet() => 'Hello, $name'; } class Employee extends Person { var salary; Employee(name, this.salary) : super(name); grantRaise(percent) { salary = (salary * percent).toInt(); } }
16. Language tour - Miscellaneous • Library level privacy ◦ Similar to C#'s internal ◦ Anything starting with an _ • Properties ◦ get/set syntax • Closures
17. Demo Time • Goals ◦ Showcase how to wrap WebGL in Dart ◦ Provide a base framework to start creating games and other 3D applications • Inspiration ◦ XNA • State ◦ pre-alpha
18. Drawing geometry • Bind an EffectPass • Set any uniforms ◦ Model View Projection matrix ◦ Texture units ◦ etc • Bind vertex buffer • Bind index buffer • Draw
19. Drawing geometry effect.parameters['uMVPMatrix'].setMatrix4x4(mvp); effect.parameters['uSampler'].setInt(0); EffectPass pass = effect.techniques[techniqueName].passes[0]; pass.apply(); device.setTexture(__texture, 0); device.setVertexBuffer(__vertexBuffer); device.setIndexBuffer(__indexBuffer); device.drawIndexedPrimitives( PrimitiveType.TriangleList, 0, indexBuffer.indexCount);
20. Interfacing with WebGL • Interaction is handled through GraphicsDevice ◦ Contains a WebGLRenderingContext • Other classes hold references to WebGL bindings ◦ WebGLTexture ◦ WebGLBuffer • Need to know when to update Vertex Buffer Objects
21. Vertex Buffer Objects // Get the vertex declaration VertexDeclaration declaration = buffer.vertexDeclaration; int stride = declaration.vertexStride; // Enable each vertex attribute for (VertexElement element in declaration.elements) { int index = element.usage.value + element.usageIndex; int offset = element.offset; int size = element.format.value >> 2; _gl.enableVertexAttribArray(index); _gl.vertexAttribPointer( index, size, WebGLRenderingContext.FLOAT, false, stride, offset); } }
22. Dart's future • Dart is pre-release • You can help shape it! ◦ Download the SDK ◦ Discuss the language on the mailing list ◦ Submit suggestions
23. Wrapping up • Dart simplifies development of modern web applications ◦ Easier to develop large applications • Dart is built for performance ◦ 3D applications require speed • Dart comes with batteries included ◦ IDE and core libraries available out of the box
24. Thanks for listening! Dart on the web http://dartlang.org http://groups.google.com/a/dartlang.org/group/misc/topics Don Olmstead @don_olmstead +Don Olmstead http://donolmstead.me