Using interactive examples
A picture says more than a thousand words and a demo more than a thousand pictures. This is why we include plenty of interactive examples.
Live examples
Click the "run demo" button below to activate the example! Once active, you should be able to navigate the 3D view by moving the cursor with the left mouse button pressed to rotate, or mouse wheel to zoom in/out. You can also move the camera by moving the cursor with the right mouse button pressed, or by pushing any of the WS, AD or QE keys.
The above example shows a minimalistic implementation to get anything on screen. It also demonstrates a few key concepts:
- Create a render view.
- Modify the render state.
- Run the render loop.
- Cleanup.
Live code editing
Most examples will have a more limited scope where the view is already created and some state set.
This is to keep the code short and focus on the subject at hand, but also for performance and user experience reasons.
The example below takes no parameter and simply returns changes to the RenderState, which describes what the rendering should look like.
The context in which is runs applies those changes to the view's render state before rendering.
Click to activate and then try changing the the values in the code in the example below!
We use Microsoft's Monaco editor, which is quite powerful and helpful for editing typescript code. Try hovering your mouse over some of the properties and see how the documentation pops up! Also notice how auto completion makes it easy to add new code.
Use ctrl + space or ⌥ + esc on macOS to prompt the editor to make suggestions related to where the cursor is placed!
Errors
Like any programming, live editing has several possibilities for errors. Red squigglies will appear under code that typescript don't understand. If you change the module signature, i.e., change the function name(s) or parameters, the example won't work. Runtime errors may also break the example. Some examples will attempt further validation of e.g. render state and report values that are out of range or invalid combinations of values. All the errors mentioned above will prevent the 3D view from running.
Other sources of errors that won't be reported is render state or other parameters set to values that are technically valid, but nonsensical. For example setting the exposure to -100, which would produce essentially a black image, or camera parameters where nothing is visible. Also, you might create render state that results in too much memory consumption and will crash your browser, or take too long to render and time out.
In 3D, the possibilities of shooting yourself in the foot are near infinite. This is just a fact of life. All we can do is try to nudge you towards the pit of success.
Think of examples as a sandbox to tinker with working code. Avoid excessive hacking!
Reference documentation
Guides can only get you started. For more detailed information, please consult the reference documentation.
Full examples
For complete, buildable demo projects, please visit our example repo at github!
Need more demonstrations?
The Playground page contains 20+ demos covering various aspects of different Novorender packages.