Examples
Check the following 3D scene examples to see how well WaveJS performs in your browser:
Add a model to the scene
The first thing we need to start using WaveJS is to create a canvas element in our HTML. From this canvas, we will create our scene with WaveEngineJS.Scene on which we can add models simply using the method addModel. These models are js objects created using the constructor WaveJS.Model();.
For the 3D models design, we created a command line tool that allows reading models in the obj format (a common format used in 3D design tools) and writing a js adapted for WaveJS.
var canvas = document.getElementById("canvas");
var scene = new WaveEngineJS.Scene(canvas);
scene.addModel(mymodel);
Now we can apply a transformation (rotation, displacement or scaling) on the model o simply change the color of its edges.
mymodel.changeRotation(0, rotY, 0);
mymodel.changePosition(0, 0, 0);
mymodel.changeScale(7, 7, 7);
mymodel.changeColor([255, 0, 0, 1], [255, 0, 0, 1]);
Camera movement
To add a camera WaveEngineJS.Camera to scene, we simply use the method addCamera of Scene. Once added, we can modify its position using the camera direction vector as a parameter.
var camera = new WaveEngineJS.Camera(canvas.width, canvas.height);
scene.addCamera(camera);
camera.changeCameraPosition([0,150, 150]);
Apply shadows and lights
We can add shadows and illumination to our model. To do so, we need to specify that the model supports shadows (hasShadow) and illumination (hasIllumination).
mymodel.hasShadow = true;
mymodel.hasIllumination = true;
Animation
To animate the model, we will use the following function: requestAnimationFrame, in each execution of this function, we will change the rotation of our model. For screen display, we will use the Draw function that will render the scene in 3 different ways (Wireframe, Solid and Points).
window.requestAnimationFrame(animate);
var rotY = 0;
function animate() {
scene.models[0].changeRotation(0, rotY, 0);
Draw();
rotY -= 0.1;
window.requestAnimationFrame(animate);
}
var drawType = scene.SOLID;
function Draw() {
switch (drawType) {
case scene.WIRE:
scene.render(scene.WIRE);
break;
case scene.SOLID:
scene.render(scene.SOLID);
break;
case scene.POINTS:
scene.render(scene.POINTS);
break;
}
}
Ray casting
To determine which of the scene models we clicked on, we will use the scene function getGroupModelInMap to which we can enter the values x and y obtained in clicking the screen. This function uses ray casting, which extends a ray from the camera to check for collisions, and in case of collision it will return the closest model to the camera.
groupModel = scene.getGroupModelInMap([x, y]);
For more details about how to use ray casting with WaveJS, you can check out the following example: Example 1: Sphere with shadows.
Culling. Visibility algorithms
For those who do not know, there are several culling techniques (elimination of non-visible polygons). BackfaceCulling hides polygons that don´t face the camera, for example the rear faces of cubes you are drawing. Another process called FrustumCulling (no implemented in WaveJS) consists in not rendering non-visible polygons that is to say polygons that are outside the Frusum (camera field of view).
In WaveJS, we can activate the backfaceCulling of the models to only render elements that are visible from the camera:
cubeW1.backfaceCulling = true;