3 D Model Viewer

Hybrid promises to be a viable tool for creating tools for games and multimedia apps. So far, there has been little proof of this. How about creating a simple model viewer with 3 ortho wireless viewports and a perspective-projected one?

Creating an OpenGL viewport with Hybrid is pretty much trivial, so we'll make it cool by adding a Spinners to control offsets and zoom for each viewport.

First off, how do we load a simple 3d model? We might try loading some .3ds, .obj or .ase file, but writing a parser for any of these formats is not in the scope of this tutorial. What then? Luckily, the xf package contains a loader for team0xf's Hme scene format. hme files are simple human-readable config-like files exported by our custom 3ds Max exporter written in MaxScript.

The HmeLoader yields a scene description composed of a hierarchy of Nodes, Meshes and a few other classes. They are all game/engine-neutral and meant as an intermediate data transfer format.

In order to manage a viewport and its settings in a sane manner, we'll create a custom class for it, SceneView.

Additionally, we're going to create a very simple custom widget class which will encapsulate the zoom and offsets for a viewport.

This tutorial will provide code chunks in roughly the order they should be composed. At the end, the complete code will be presented. Let's get it started.

Imports

First, we need to pull in a few tons of stuff to make our program work without re-inventing the wheel too much.

Since we're about to create a custom widget, we needed to import two modules: CustomWidget and Common. The former defines a widget that is configured using configs. The latter contains imports that custom widgets and their mixins need.

Here we've imported the Hme format loader as well as modules for a few components of the intermediate scene hierarchy.

OMG (Open Math for Games) provides us with useful linear algebra utilities. This includes vectors, quaternions, matrices, misc stuff and CoordSys. The latter wraps a 3D vector based on fixed - point numbers along with a quaternion to represent a coordinate system. We won't need any more for manipulating 3D objects.

Finally, we'll import Dog - the D OpenGL wrapper from team0xf. We'll use it for direct rendering using a GLViewport.

We'll skip two misc Tango module imports and follow directly into our custom widget's declaration:

That wasn't hard, was it? This defines a custom widget class which we must configure in the config files. The defineProperties CTFE code generator will produce four properties, zoom, x, y and z, all of type float. They are not inline properties, so they need to be bound to something in the config files or they'll be useless. So let's define our custom widget in a ModelViewer.cfg file:

We've defined ViewportControls to be composed of four vertical boxes, each containing a label explaining the meaning of a FloatInputSpinner below it. At the end of the custom widget type declaration, we bind the properties declared in the D class using defineProperties to concrete properties within the float spinners.

The ModelViewer.cfg will also contain the layout, but we'll skip it as it's nothing relevant at the moment.

Rendering the scene

Let's create the SceneView class for managing a single viewport. The beginning will look like this:

What do we have here?

• coordSys is the transformation applied to our camera
• objCS is the transformation applied to the scene within
• ortho determines whether the viewport uses orthogonal or perspective projection
• scene is the scene that will be displayed. It's an instance of a class from xf.loader.scene.model
• lights make the model not look like crap
• wireframe determines whether the scene is rendered as lines or solid-filled polygons
• zoom will be positive during magnification

We'll skip the most of the SceneView class' body, since it's mostly a few dozen OpenGL calls, but let's take a look at how the actual scene nodes and meshes are processed:

The Node class holds stuff like animations, lights, etc, but in this case, we're only interested in its children and static meshes. Let's now draw the meshes:

gl.immediate does glBegin(...); inlineDelegateCall(); glEnd();, the rest should be self-explanatory.

Creating the GUI

Since we've created all dependencies, let's put it all together - create the SceneViews, ViewportControls and some basic controls to load and unload the scene. Let's skip the usual Hybrid initialization and create the SceneViews. Please note that we're currently outside of the main loop.

With this setup, the four viewports should be: top, front, left, perspective. Only perspective will be solid-filled.

As for loading/unloading the scene, this snippet of code inside the main loop will handle it:

I hope that wasn't too complex to grasp. Hold on, we're almost there. The only thing remaining is to create the GLViewport widgets and update the SceneView properties using data from ViewportControls. This is all handled by this short piece of code:

Result

That wasn't a lot of code and it doesn't even get much longer when we add all the stuff we've skipped. Without further ado, here's the result:

Source code

This sample can be found in hybrid/demos/modelViewer, but as initially promised, here's the complete source code:

GUI Config

And the accompanying config containing our custom widget type definition and a layout for the window:

Login