I'm Siegfried. A developer. Yep.

WebGL experiment part 4, 3D shapes

So I heard you liked webgl…

Intro

We are going to draw this:

(image from NeHe website)

The demo page is here and the code is here.

Drawing stuff

This function has changed:

• Light type: we now have a better light with a nice reflection sometime (^o^)/
• No more triangle or square, now we have a pyramid and a cube !
``````function drawStuff(engine) {
var scene = new BABYLON.Scene(engine);
scene.ambientColor = new BABYLON.Color3(0, 0, 0);

var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 0, -10), scene);
camera.target = new BABYLON.Vector3(0, 0, 0);
var light0 = new BABYLON.DirectionalLight("Dir0", new BABYLON.Vector3(0, -1, 0), scene);

var pyramid = drawPyramid(scene);
var cube = drawCube(scene);

``````

Let’s add an HEAVY ROTATION

``````  var degree = 0;

setInterval(function() {
var value = Math.PI * degree++/180;
pyramid.rotation = new BABYLON.Vector3(0, -value, 0);
cube.rotation = new BABYLON.Vector3(-Math.PI/12, value, 0);
if (degree === 360) {
degree = 0;
}
}, 10);

``````

Finally, let’s move our shapes

``````  pyramid.position.x = -2;
cube.position.x = 2;

return scene;
}
``````

Function: drawPyramid

Our `drawPyramid` fonction will build a nice pyramid, with a base face (square) and four triangles from the base borders to the top (and beyond !)

``````function drawPyramid(scene) {
var pyramid = new BABYLON.Mesh('pyramid', scene);
``````

We start with the faces. Please note that they are triangles (3 points each) except the last one, which is a square:

``````  var positions = [
// Front face
0,  1,  0,
-1, -1,  1,
1, -1,  1,

// Right face
0,  1,  0,
1, -1,  1,
1, -1, -1,

// Back face
0,  1,  0,
1, -1, -1,
-1, -1, -1,

// Left face
0,  1,  0,
-1, -1, -1,
-1, -1,  1,

// Bottom face
-1, -1, -1,
1, -1, -1,
1, -1, 1,
-1, -1, 1
];
``````

The normals for our faces:

``````  var normals = [
1, 1, 1,
1, 1, 1,
1, 1, 1,

1, 1, 1,
1, 1, 1,
1, 1, 1,

1, 1, 1,
1, 1, 1,
1, 1, 1,

1, 1, 1,
1, 1, 1,
1, 1, 1,

1, 1, 1,
1, 1, 1,
1, 1, 1,
1, 1, 1
];
``````

Nice colors:

``````  var colors = [
1, 0, 0,
0, 1, 0,
0, 0, 1,

1, 0, 0,
0, 0, 1,
0, 1, 0,

1, 0, 0,
0, 1, 0,
0, 0, 1,

1, 0, 0,
0, 0, 1,
0, 1, 0,

0, 0, 1,
0, 1, 0,
0, 0, 1,
0, 1, 0
];
``````

A loop to generate the indice for our faces:

``````  var indices = [];

var i = 0;
while (i < 12) {
indices.push(i+0);
indices.push(i+1);
indices.push(i+2);

i = i+3;
}
``````

Except for the base, displayed by 2 triangles:

``````  indices.push(12);
indices.push(13);
indices.push(14);

indices.push(12);
indices.push(14);
indices.push(15);
``````

Finally, we load everything into the mesh:

``````  pyramid.setVerticesData(positions, BABYLON.VertexBuffer.PositionKind);
pyramid.setVerticesData(normals, BABYLON.VertexBuffer.NormalKind);
pyramid.setVerticesData(colors, BABYLON.VertexBuffer.ColorKind);
pyramid.setIndices(indices);

return pyramid;
}
``````

Function drawCube

This function looks like what we saw before, but every face has 4 points

``````function drawCube(scene) {
var cube = new BABYLON.Mesh('cube', scene);
``````

``````  var positions = [
// Front face
-1, -1, -1,
1, -1, -1,
1, 1, -1,
-1, 1, -1,

// Right face
1, -1, 1,
1, 1, 1,
1, 1, -1,
1, -1, -1,

// Back face
-1,  1,  1,
1,  1,  1,
1, -1,  1,
-1, -1,  1,

// Left face
-1, 1, 1,
-1, -1, 1,
-1, -1, -1,
-1, 1, -1,

// Top face
1, 1, -1,
1, 1, 1,
-1, 1, 1,
-1, 1, -1,

// Bottom face
-1, -1, 1,
1, -1, 1,
1, -1, -1,
-1, -1, -1
];
``````

The normals for our faces:

``````  var normals = [
1, 1, 1,
1, 1, 1,
1, 1, 1,
1, 1, 1,

1, 1, 1,
1, 1, 1,
1, 1, 1,
1, 1, 1,

1, 1, 1,
1, 1, 1,
1, 1, 1,
1, 1, 1,

1, 1, 1,
1, 1, 1,
1, 1, 1,
1, 1, 1,

1, 1, 1,
1, 1, 1,
1, 1, 1,
1, 1, 1,

1, 1, 1,
1, 1, 1,
1, 1, 1,
1, 1, 1
];
``````

A loop to generate the indice for our faces:

``````  var indices = [];

var i = 0;
while (i < 24) {
indices.push(i+0);
indices.push(i+1);
indices.push(i+2);

indices.push(i+0);
indices.push(i+2);
indices.push(i+3);

i = i+4;
}
``````

Nice colors:

``````  var colors = [
1, 0, 0,
1, 0, 0,
1, 0, 0,
1, 0, 0,

0, 1, 0,
0, 1, 0,
0, 1, 0,
0, 1, 0,

0, 0, 1,
0, 0, 1,
0, 0, 1,
0, 0, 1,

1, 1, 0,
1, 1, 0,
1, 1, 0,
1, 1, 0,

1, 1, 1,
1, 1, 1,
1, 1, 1,
1, 1, 1,

1, .2, .6,
1, .2, .6,
1, .2, .6,
1, .2, .6
];
``````

Finally, we load everything into the mesh:

``````  cube.setVerticesData(positions, BABYLON.VertexBuffer.PositionKind);
cube.setVerticesData(normals, BABYLON.VertexBuffer.NormalKind);
cube.setVerticesData(colors, BABYLON.VertexBuffer.ColorKind);
cube.setIndices(indices);

return cube;
}
``````

The end

Please refer to the BabylonJS Basic elements page to learn how to easily create some elements. I wanted to do my cube by myself, but it’s as simple as:

``````var box = BABYLON.Mesh.CreateBox("Box", 6.0, scene);
``````

Are you lost ? Do you have a question or a comment ? I’m sure I made a lot of mistakes, don’t be mad.

Let’s texture things and try more stuff in the next experiment !