Nuo Model Viewer

Featured

Nuo Model Viewer is a 3D renderer which is extremely simple, yet capable of generating images close to professional quality. It is a hackable renderer, whose source code is easy to understand, and is a good start point of learning computer graphics for real-world tasks. This whole site is dedicated to provide a complete tutorial on real time rendering around it.

With the help of this site and Nuo Model Viewer, and modest effort of learning, you will find that generating images like the “augmented reality” scene shown above through your own code is far less harder than you thought, only little more than displaying a JPEG on the screen.

The major features of Nuo Model Viewer,

  • Open source.
  • Blend virtual object with real photo.
  • Light weight and modular. It has a light weight core which can server as a super light weight reusable rendering engine.
  • Perform in real time with moderate quality for still image rendering.

A Rendering Tutorial

Featured

3D rendering was one of the topics in computer software which I tried to engage at the very beginning of my journey of learning programming. In fact, I had studied 3D modeling through 3DS Studio 4.0 for a year before deciding to pursue a software developer career.

Yet I had not touched GPU-based rendering until 10 years later after I started programming, and it would be another 6 years before I rendered something more than a sphere or a donut on the screen.

There are quite a few unique obstacles in learning 3D rendering which a programer hardly runs across in other fields, which is why even veteran programmers experienced in other areas often give up shortly taste the topic.

For one, you need to dive into multiple areas, math, UI kit, and graphics APIs, before putting them together to see the actual result visually. Another on top of list is the lack of proper data. Can you imagine to learn image processing without a digital camera or a reliable JPEG or RAW image loader? On of the reasons that I hate every tutorials and books I read is that they all start from drawing a triangle, or using the pre canned Utah tea pot. It’s boring and, more importantly, prevent you from discovering and thinking about real-world challenge of creating a rendering system.

A wonderful thing happening lately is that, with proper tools, methodologies, and information, a beginner can safely skip a few boring step and move rapidly to real-world problems in the learning process of many areas. I do want to share this advancement in learning approach to more developers.

By occasionally glimpse to materials in this field, it took me about ten years to figure out how vendors of hardwares and operating systems collaborate to offer a development environment to programmers as well as ways to deliver to users (in multiple styles originated from varies points of view of different organizations). I eventually grabbed the basic concept of moving from fixed-function pipeline to programmable GPU, yet too bored about rendered simple donuts shapes, and too confused about the ad-hoc theory of rendering, to proceed. I paused my effort in 3D rendering for another 7 years (although doing a little bit GPU programming for other stuff), thinking of applying the methodologies which I learned from other endeavor to it from time to time. The event eventually reignited my interest is that my boss encouraged me attending the SIGGRAPH 2016. Here it comes, over one year later, I finally closed the ends of all I accumulated and created Nuo Model Viewer.

It’s worth to mention that, like in many tasks, I seldom write code from scratch in this learning process. Instead, I took example code from varies places, which I transformed into the form I need (or aligned to Nuo Model Viewer’s code base). Looking back, if I had encountered a sample code base which is as simple as, yet integrated as many graphics features as Nuo Model Viewer, I would have saved much effort in fusing and morphing the code, yet obtain the same level of knowledge. That inspires me to share Nuo Model Viewer with more developers and create this site of tutorials around it.

Tutorial 1: Live in the World

 

Tutorial 1: Live in the World

Leave a comment

A Physician Way

Programmers are custom to the idea of learning a new area from “hello world”, and to add more and more things onto that bare “hello world” code skeleton.

Physicians approach their mission from a different angle. Everyone, no exception to physicians, has to “live” in the entire world first (“entire” not in the geographical sense, but in the sense of physics). Then physicians start taking out uncontrolled factors from the world (by fixture things they are uninterested for a moment in a lab environment) to make sense of certain controlled element.

The longer one stays in the industry building increasingly complex software, the more one would realize the physician way is more close to the truth of learning. The “hello world” way sounds elegant in logic, drawing analogy to Euclid’s Elements. Unfortunately, hardly any software system has the pure beauty of geometric axiom system. They are messy like real physics. Presented with a bare-bone code fragment, one has no clue where the rest of the mess would connect to.

One still need bare-bone systems, to learn a new area. But you get them from a different direction. From a real-world code base, dissect it and strip it off to bare-bone systems of many dimensions.

Build the Example

As I mentioned and reiterated in the home page, Nuo Model Viewer is a perfect real-world example. The source code of Nuo Model Viewer is targeted to macOS 10.13 and above. Clone the code from the Github repo. And get the latest Xcode (9.1 at the time of writing) installed.

In the latest master branch there is the complete implementation of a renderer embodying quite a few real time rendering features, such as soft shadow, ambient occlusion, blending with a background, etc. To start with a simpler example, let’s go back in time. Checkout commit ff4cc0d.

Open the project file ModelViewer.xcodeproj. Build and run it from Xcode, you should see the main UI as follows.

Without fed with proper data, this is only a blank window. Unlike some other tutorials, we don’t embed a pre-coded triangle or a donut shape into the code which are shown immediately. Instead our renderer consumes real-world data, which are created by 3D model designers. Many of them charge a fee to use which is not cheap, since they are created by hard work. Still, some designers are willing to share their work for free. We are going to use a good UH-60 model.

Download the model, uncompress it to such a folder that fit your way of organizing your assets. Go back to the Nuo Model Viewer, use menu “File -> Open” to open the uh60.obj file which is under the folder where the downloaded model is uncompressed.

Nuo Model Viewer will show the model as above. Well, not exactly the same as the screenshot above at the beginning. You can position the direction of the model facing you by mouse dragging, change the distance of the camera by the two-figure zoom gesture, and turn on/off the texture by selecting the popup menu at the top right corner.

Congratulations! You’re living in the world. There is nothing in this world you can not explore (i.e. debugging and add logs) and learn from. For many developers, they from time to time are dropped with a code base far more complex than the Model Viewer (even the latest master version), told to figure out adding feature within months, if not weeks. You are lucky that this tutorial site will continue to dissect this sample code base for you, not only for this very early version, but to the very latest version with more real-world features. Yet you are encouraged and recommended to dissect it in your own way, changing, taking away, or adding code to see what happens to the rendering result.

This concludes your first tutorial.