Hi! I'm Nicolas and I'm interested in information visualization, JavaScript and web standards.
I currently work as a Data Visualization Scientist at Twitter. I wrote PhiloGL, the JavaScript InfoVis Toolkit and V8-GL.
Three ways to make 3D
Posted in:
opengl
, webgl
, javascript
, scala
, processing
, spde
Last week I got the chance to put my hands on some technologies I've been interested for some time now. I've created a basic 3D example of some fractals, and implemented it in 2D Canvas, WebGL and SPDE (Scala + Processing).
The main goal of these experiments was to warm up a little bit in 3D, to learn WebGL, Scala and Processing. I had previous experience with 3D and OpenGL while developing V8-GL, an OpenGL ES port to V8, and also while developing the House of Cards visualization in OCaml. But these were other times. Now OCaml is dead, and there's a V8-GL port in the browser, which is called WebGL. I'm kind of proud to have chosen things that became sort of mainstream later on though: functional programming for graphics and hardware accelerated graphics with JavaScript :) .
2D Canvas
The 2D Canvas API has a limited capability for 3D graphics. In order to make 3D with it you can use some high level 3D engine like pre3d or three.js which provide classes to do mathy stuff in 3D and then use tricks like the pinhole camera model to project them on 2D. What's interesting about three.js is that it also provides SVG and WebGL renderers. These are awesome tools to make 3D, but since my example was more in the spirit of the JS1k demos I decided to start from scratch. The only thing I used was the Vector3 and Matrix4 classes from three.js. The result is quite interesting although it's CPU intensive. You can try it here if you have a 2D canvas enabled browser.
|
|
|
var Shape = {
Sphere: function(objs, opts) {
var s = opts.s || 200,
atan2 = Math.atan2,
cos = Math.cos,
acos = Math.acos,
sin = Math.sin,
sqrt = Math.sqrt;
for(var i=0, l=objs.length; i<l; i++) {
var obj = objs[i],
pos = obj.pos,
x = pos.x,
y = pos.y,
z = pos.z,
r = x * x + y * y + z * z,
theta = acos(z / sqrt(r)),
phi = atan2(y, (x || 1));
if(!obj.sphere) {
obj.sphere = new THREE.Vector4();
}
var pos = obj.pos, sphere = obj.sphere;
pos.x = sphere.x = s * sin(theta) * cos(phi);
pos.y = sphere.y = s * sin(theta) * sin(phi);
pos.z = sphere.z = s * cos(theta);
}
}
//...other shapes here...
};//transitions object. can be used like
//Trans.linear, or Trans.Elastic.easeOut, etc.
var Trans = {
linear: function(p){
return p;
}
};
(function(){
//add easing equations as methods
//of the transition object/function
//i.e add easeIn/Out to the Elastic/Sine objects
var makeTrans = function(transition, params){
var trans = {
easeIn: function(pos){
return transition(pos, params);
},
easeOut: function(pos){
return 1 - transition(1 - pos, params);
},
easeInOut: function(pos){
return (pos <= 0.5)? transition(2 * pos, params) / 2
: (2 - transition(2 * (1 - pos), params)) / 2;
}
};
for(var p in trans) {
transition[p] = trans[p];
}
return transition;
};
//transition equations
var transitions = {
Sine: function(p){
return 1 - Math.sin((1 - p) * Math.PI / 2);
},
Elastic: function(p, x){
return Math.pow(2, 10 * --p)
* Math.cos(20 * p * Math.PI * (x[0] || 1) / 3);
}
//...other transitions here...
};
//enhance the Trans object with new transitons
for(var p in transitions) {
Trans[p] = makeTrans(transitions[p]);
}
})();WebGL
Since most of the code used in the previous example was dealing with 3D objects and then projected into 2D space, this code can also be used when working with WebGL. Getting started with WebGL is much harder than with 2D Canvas though. First, there's all that setup of creating a program, compiling the shaders (which of course is GLSL code and not JavaScript itself), linking them into the program, initializing buffers, etc. Moreover, since there's not a fixed pipeline all that push/pop matrix stack has to be hand-coded now, which makes it quite difficult to create things without a framework. However, since this is a very simple example I used exactly the same things here than in the previous example. Here's the live example that you can see in a WebGL enabled browser (click here to get a WebGL enabled browser). Or you can check the video I made of the demo below (click here if you can't see the video): The rendering part is quite different though. You need to set all the vertex information into a buffer and send that data into the shaders. The shaders will get the data in attributes (which is per vertex information) or uniforms (data which will remain the same for all vertices). For example, all particles are colored the same, but each particle has a different position, so the code would look like this://draw scene
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 500.0);
loadIdentity();
mvTranslate([0.0, 0.0, -150.0]);
mvRotateX(rx);
mvRotateY(ry);
for(var i=0, l=parts.length, vertices=[]; i<l; i++) {
var p = parts[i].pos;
vertices.push(p.x, p.y, p.z);
}
//create and store and bind vertex data
gl.bindBuffer(gl.ARRAY_BUFFER, ballsPositionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,
ballsPositionBuffer.itemSize,
gl.FLOAT, false, 0, 0);
//set model view and perspective matrix
setMatrixUniforms();
//set color and object scaling
gl.uniform1f(shaderProgram.scaleUniform, s);
gl.uniform3f(shaderProgram.colorUniform, r, g, b);
//draw
gl.drawArrays(gl.POINTS, 0, ballsPositionBuffer.numItems);SPDE = Scala + Processing
Since OCaml is dead and I really liked some features of it such as type inference, destructuring, pattern matching, object literals, operator overloading and more, I looked for some replacement and considered Scala as an interesting alternative. I'm still learning Scala, and while being more OO and less functional than OCaml, there's still room for pattern matching with case classes, syntactic sugar for singletons (or object literals), and other goodies such as traits, operator overloading, etc. Plus, it targets the JVM. SPDE is the "port" of the Processing Development Environment to the Scala programming language. It basically provides a nice workflow to create and run projects, providing the set of drawing methods that already exist in Processing. The SPDE project is hosted at Github as well as the SPDE Examples. The structure of the code I ported is quite similar to the WebGL example code, but more high-level in the sense that there are lots of drawing primitives and useful functions within the Processing environment. I really enjoyed hacking this thing with Scala. Here's the source code for the example. You can also watch a video of the visualization below (click here if you can't watch the video): Remember the code for the tweener I described before? Some really nice feature in Scala is that you can extend the class Function which provides mappings from one type to another. In Scala functions are also treated as classes and the "elegant" code done for creating transitions in JavaScript can be "ported" to Scala in that same way:abstract class Transitions extends Function[Float, Float] {
private def easeInVar(x: Float, i: Float = 1.0): Float = apply(i * x);
private def easeOutVar(x: Float, i: Float = 1.0): Float = i - apply(i * (1 - x));
def easeIn(x: Float) = easeInVar(x);
def easeOut(x: Float) = easeOutVar(x);
def easeInOut(x: Float): Float = (if (x <= 0.5) easeInVar(x, 2) else easeOutVar(x, 2)) /2
}
object Transitions {
private val pi = Pi;
def linear(x: Float) = x;
object Sine extends Transitions {
override def apply(x: Float): Float = 1 - sin((1 - x) * pi / 2)
}
object Back extends Transitions {
override def apply(p: Float): Float = {
val x = 1.618;
pow(p, 2) * ((x + 1) * p - x);
}
}
//...other objects here...
}Transitions.linear _;
Transitions.Elastic.easeOut _;Transitions.Elastic.apply(0.5); //is the same as...
Transitions.Elastic(0.5);
Transitions.Elastic.easeOut.apply(0.5); //is the same as...
Transitions.Elastic.easeOut(0.5);