WebGL experiment part 6

2013-10-07 Last modified on 2021-05-24

Intro

In this experiment, we will create this:

A pyramid !

The demo page is here and the code is here.

BabylonJS

I am refering about BabylonJS since the beginning of my experiments. You must go see the examples on their websites, their level of awesomeness is over 9000.

The framework is open source, made by people from Microsoft, using PC with Windows (true story; seriously, how can people code with Apple keyboards ?).

Let's add a pyramid generator

BabylonJS source code is available on GitHub.

The Mesh class contains the functions that can generate Boxes, Spheres etc.

We are going to add a function that creates a square-based pyramid CreatePyramid4. The function have 5 parameters:

  • name: the name of our mesh (string)
  • baseSize: the width (our height) of the base square (float)
  • height: the height of the pyramid (float)
  • scene: the scene where the pyramid will be added
  • updatable: if the vertex buffer is dynamic (boolean)
BABYLON.Mesh.CreatePyramid4 = function (name, baseSize, height, scene, updatable) {
  var pyramid = new BABYLON.Mesh(name, scene);

Positions for the pyramid points:

  // Adding faces
  var positions = [
    // Front face
    0,  height/2,  0,
    baseSize/2, -height/2, baseSize/2,
    -baseSize/2, -height/2, baseSize/2,

    // Right face
    0, height/2, 0,
    baseSize/2, -height/2, -baseSize/2,
    baseSize/2, -height/2, baseSize/2,

    // Back face
    0, height/2,  0,
    -baseSize/2, -height/2, -baseSize/2,
    baseSize/2, -height/2, -baseSize/2,

    // Left face
    0, height/2,  0,
    -baseSize/2, -height/2, baseSize/2,
    -baseSize/2, -height/2, -baseSize/2,

    // Bottom face
    -baseSize/2, -height/2, baseSize/2,
    baseSize/2, -height/2, baseSize/2,
    baseSize/2, -height/2, -baseSize/2,
    -baseSize/2, -height/2, -baseSize/2
  ];

Normals for the faces:

  var normals = [
    height, baseSize/2, 0,
    height, baseSize/2, 0,
    height, baseSize/2, 0,

    0, baseSize/2, height,
    0, baseSize/2, height,
    0, baseSize/2, height,

    -height, baseSize/2, 0,
    -height, baseSize/2, 0,
    -height, baseSize/2, 0,

    0, baseSize/2, -height,
    0, baseSize/2, -height,
    0, baseSize/2, -height,

    0, -1, 0,
    0, -1, 0,
    0, -1, 0,
    0, -1, 0
  ];

Indices (order of points when creating the faces) and uvs (coordonnées de textures):

  var indices = [];
  var uvs = [];
  var i = 0;

For the 4 faces pointing to the top of the pyramid

  while (i < 12) {
    indices.push(i+0);
    uvs.push(1.0, 1.0);
    indices.push(i+1);
    uvs.push(0.0, 1.0);
    indices.push(i+2);
    uvs.push(0.0, 0.0);
    i = i+3;
  }

And for the base:

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

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

  uvs.push(1.0, 1.0);
  uvs.push(0.0, 1.0);
  uvs.push(0.0, 0.0);
  uvs.push(1.0, 0.0);

And we load everything in the mesh:

  pyramid.setVerticesData(positions, BABYLON.VertexBuffer.PositionKind, updatable);
  pyramid.setVerticesData(normals, BABYLON.VertexBuffer.NormalKind, updatable);
  pyramid.setVerticesData(uvs, BABYLON.VertexBuffer.UVKind, updatable);
  pyramid.setIndices(indices);

  return pyramid;
}

Demo time !

In the demo page is here, I added 4 pyramids: a big one in the center, and 3 small along the axis:

function drawStuff(engine) {
  var scene = new BABYLON.Scene(engine);
  //scene.clearColor = new BABYLON.Color3(0, 0, 0);

  var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(50, 100, 0), scene);
  var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, new BABYLON.Vector3.Zero(), scene);

The big pyramid:

  var pyramid = BABYLON.Mesh.CreatePyramid4("pyramid", 10, 20, scene);

And the smaller ones:

  var formX = BABYLON.Mesh.CreatePyramid4("formX", 1, 2, scene);
  var formY = BABYLON.Mesh.CreatePyramid4("formY", 2, 4, scene);
  var formZ = BABYLON.Mesh.CreatePyramid4("formZ", 4, 8, scene);

Moved along different axis:

  formX.position.x = 20;
  formY.position.y = 20;
  formZ.position.z = 20;

And let's rotate our big pyramid:

  rotate(pyramid);

  return scene;
}

The end

We looked a little into BabylonJS source to add a small function.

They are tons and tons of stuff to see: cameras, lights, ...

More experiments to come ! Stay tuned !

#webgl