README.md

Guide to develop for LiteScene (WebGLStudio engine)

This guide intends to help people understand the engine so they can take full advantage of it from the WebGLStudio platform.

The most important thing to understand is that the LiteScene engine is separated in several layers, depending on what you want to do you may not need to understand every one of them, but if you plan to develop full 3D applications, maybe you should check LiteGL.js which is the low-level layer used by LiteScene to access the GPU.

Guides

Here there is a list with the most commont topics to master LiteScene:

Features

LiteScene is an engine meant to work with WebGLStudio although it is not mandatory to do so (you can create full scenes just by accesing the engine directly from code).
The engine is meant to be very modular and easy to extend.

Simple things can be added to the engine (like new modules or materials) without really needing to understand the whole system, but for more complex behaviours you will need to learn the system as a whole.

Because the whole engine is coded in Javascript (without any transpiler) you have full access from within the engine to any part of it, that means that you could create a script that replaces the behaviour of an existint part of the engine without any problem, thanks to the nature of Javascript and the modularity of the system.

The engine also allows different ways to do the same actions to help people, so you can use in-editor scripts, or external scripts loaded on launch, or graphs, or directly replace the source code of the engine.

The engine is also meant to help the editor to understand what is going on in every component, this way users can create new components with personalized interfaces that helps them to setup their scenes, without the need to code them.

Limitations

LiteScene is not meant to be used as a powerful 3D engine, it has its limitations regarding to number of objects in the scene or complexity of the interactions. If should be used in simple scenes with tens of objects at most.

LS Namespace

The LS namespace is the global namespace where all the classes are contained, some generic methods are also here that could be helpful to control the global system.

Check the documentation for a complete list with all the methods.

Inside LS there are some important object that you should be aware:

Components

MaterialClasses

Formats

Some of the most important components (such as Script, Camera, Light and Transform) are stored also in the LS namespace besides being in LS.Components.

SceneTree and SceneNode

To handle the objects in a scene the user must understand how to use the SceneTree and the SceneNode object.

While SceneNode represent an object in the scene, SceneTree represents the scene itself.

Every node could contain other nodes as children similar to how the DOM works.

The SceneTree contains a root node (scene.root) where all the nodes in the scene are pending.

Renderer

One of the main purposes of LiteScene is to provide a reliable render pipeline that can handle most common scenarios (multi-texture materials with several light sources, shadowmaps and reflections) but also giving total freedom to create your own rendering pipeline if you want.

For this reason there are several classes that handle the rendering process like LS.Renderer, LS.RenderInstance, LS.RenderState, LS.ShaderCode, LS.RenderFrameContext plus the obvious ones: LS.Material, LS.Light, LS.Camera that could be tweaked in many ways.

Player

Once a scene has been created using an editor like WebGLStudio you want to embed it easily in your website without having to handle all the events and the main loop manually. For this reason there is the LS.Player class, that handles all the low-level actions plus loading and starting the scene.