Skip to content

Archive

Tag: O3D

This tutorial is not going to introduce anything earth-shattering. We just need to start doing a little bit of housekeeping.

I am sure you may be noticing now that the tutorial sample application has been growing quite a bit over the last few tutorials, and this starts making the code a little bit unwieldy.

The first thing I have done is to move all the Javascript for O3D completely out of the HTML page, and put it all into it’s own JS file. I won’t talk much more about that here, as that is a rather standard practice.

I am, however, more interested in the shaders. Up to now, all the shaders needed on the page have been stored in a textarea and then loaded into the effect when needed (which in our case was the initialisation function). Now, the problems with doing it this way is that it does not make it very easy to reuse the effect between multiple pages, and it also makes the HTML page substantially bigger and therefore harder to work with.

So what we need to do is move all the shader code into an external file, which in this tutorial, I have put into shaders/solidred.shader. This is simply a text file containing what used to be in the effects div.

Within the O3D code, the only change that needs to be done to load the shader is in the initialisation function where we load the shader, we need to a different function to load the shader from the external file into the effect, which is done with this code.

  var redEffect = g_pack.createObject('Effect');
  var shaderString = 'shaders/solidred.shader';
  o3djs.effect.loadEffect(redEffect, shaderString);

continue reading…

Share

Using the mouse in O3D is a little trickier than catching key presses. In this tutorial I am going to use the mouse to rotate our cube.

The general principle of using the mouse for rotation, is the arcball. This allows you to transform the motion of the mouse into rotation matrices to rotate your scene.

continue reading…

Share

Capturing keyboard input using O3D is pretty straightforward. The principle is the create a listener which listens for key presses, and then passes them on to a handler which executes whatever that key press needs to do.

So, the first thing to do is to add the handler function. What it does is rotates the 3D root by the amount specified by delta.  It also sets the actionTaken flag to true if the key was processed and then returns that to the calling function.

         function keyPressedAction(keyPressed, delta) {
           var actionTaken = false;
           switch(keyPressed) {
             case 'a':
               g_3dRoot.localMatrix =
                   g_math.matrix4.mul(g_3dRoot.localMatrix,
                                 g_math.matrix4.rotationY(-delta));
               actionTaken = true;
               break;
             case 'd':
               g_3dRoot.localMatrix =
                   g_math.matrix4.mul(g_3dRoot.localMatrix,
                                 g_math.matrix4.rotationY(delta));
               actionTaken = true;
               break;
             case 'w':
               g_3dRoot.localMatrix =
                   g_math.matrix4.mul(g_3dRoot.localMatrix,
                                 g_math.matrix4.rotationX(-delta));
               actionTaken = true;
               break;
             case 's':
               g_3dRoot.localMatrix =
                   g_math.matrix4.mul(g_3dRoot.localMatrix,
                                 g_math.matrix4.rotationX(delta));
               actionTaken = true;
               break;
           }
           return actionTaken;
         }

continue reading…

Share

The basics of displaying a HUD in a 3D application is simply to combine the 3D scene with a 2D overlay.

This can be accomplished easily by treating the scene we wish to render as two distinct parts, with the 3D and 2D components each having their own views.

In the sample code included with this tutorial, most of the code is simply the code from tutorial 2 and 3, which I have combined.

The biggest difference is that instead of using one view (g_viewInfo), we now create two, one each for the 3D and 2D components. The code referencing  g_viewInfo is used to create the 3D scene, while g_hudViewInfo is used to create the HUD. I won’t go into the details of the setup, as all the code in the example has been covered in the last two tutorials, with one exception.

           g_hudViewInfo.root.priority = g_viewInfo.root.priority + 1;
           g_hudViewInfo.clearBuffer.clearColorFlag = false;

This sets the priority of the view so that the graphics are drawn in the right order. We want the 2D layer to get drawn last. We also turn off the flag for clearing the color of the hud, since we want to be able to see through it.

I also set the background color of the block in which I am displaying the text to grey with transparency set to 0.5, which demonstrates how the HUD can overlay the main scene.

Your imagination is your only limitation to how the HUD is designed but this is all there is to start building it.
continue reading…

Share

Writing text to the screen is a valuable feature, even when dealing with 3D graphics, since even the most trivial of applications needs some text output to be meaningful.

The method to write text to the screen involves setting up a canvas, onto which you are able to write.
continue reading…

Share

In the last tutorial, I showed how to lay the groundwork to get an O3D application going. Now, I think, it is time to actually make it do something.

We are going to show a spinning cube. The code here can be found almost verbatim in the O3D samples – I only made a few minor modifications to it. I figured that any code I would write my self would be no improvement over it since it fits so perfectly with this tutorial.
continue reading…

Share

O3D is a very powerful 3D rendering engine which allows you to use Javascript to add full 3D graphics to a web page.

The first thing to do is to download the O3D plugin for your browser from the O3D site. Once that is installed, your browser will be capable of using O3D.

Before you can develop a web page though, you will need the o3djs Javascript library which is also available from the O3D site. In my tutorials, the o3djs files are located in a subfolder simply called o3djs.

Once you have that housekeeping out of the way, the fun can begin.

The general principle of how O3D is embedded in a page is that you create a div with an id of o3d, and then O3D initialises this div as the client area.
continue reading…

Share