Switch branches/tags
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
raycasting and picking.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.


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

  • Scene: Understanding the scene tree
  • Components: How to use the components system
  • Scripting: How to create your own scripts
  • Input: how to get user input
  • GUI: how to add a GUI to your application
  • Resources: How to handle resources (textures, meshes, etc)
  • Player: how to use the player to embed your scene in any website
  • Custom components: How to create your own components
  • Graphs: How to create behaviour using graphs
  • Particles: How to create your own particles system
  • Raycasting and Picking: How to check if an object intersects with the mouse or the a ray

Some advanced topics:


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.


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.

For more info about the Scene read the Scene guide.


The behaviour of every node comes from the components attached to it.

Cameras, Lights, MeshRenderers, etc, are all components that could be attached to any SceneNode to add functionalities.

For more info about the Scene read the Components guide.


Scripts are a special component that contain code that should be executed. This is done to allow scenes to contain behaviour written by its author without the need to include external libraries.

For more info about the scripts read the Scripting guide.


Graphs are another interesting component similar to scripts because they allow the creator to insert some behaviours, but instead of using code it uses graphs made combining nodes.

For more info about the scripts read the Graphs guide.


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.

For more info about the rendering pipeline read the Rendering guide.


There are many resources used by the application like Textures, Meshes and Shaders for rendering the frame, but also Scripts for behaviour, audios or data files.

All this resources are loaded and stored in the ResourcesManager.

For more info about the rendering pipeline read the Resources Manager guide.


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.

For more info about the player read the Player guide.


To handle requesting files from the network we supply with a high-level class called Network.