rendeer.js
is a lightweight 3D scene graph library, meant to be used in 3D web apps and games. It is meant to be flexible and easy to tweak. It used the library litegl.js as a low level layer for WebGL. It comes with some common useful classes like: Scene and SceneNode Camera Renderer ParticleEmissor And because it uses litegl you have all the basic ones (Mesh, Shader and Texture).
Usage
Here is a brief example of how to use it, but I totally encourage to read the more detailed starter guide stored in the guides folder, or to check the boilerplate provided, and finally check the documentation for better understanding of the API.
First include the library and dependencies
<span class="pl-kos"><</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">js/gl-matrix-min.js</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">script</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">js/litegl.js</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">script</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">js/rendeer.js</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">script</span><span class="pl-kos">></span>
Create the scene
<span class="pl-k">var</span> <span class="pl-s1">scene</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">RD</span><span class="pl-kos">.</span><span class="pl-c1">Scene</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
Create the renderer
<span class="pl-k">var</span> <span class="pl-s1">context</span> <span class="pl-c1">=</span> <span class="pl-c1">GL</span><span class="pl-kos">.</span><span class="pl-en">create</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c1">width</span>: <span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">innerWidth</span><span class="pl-kos">,</span> <span class="pl-c1">height</span>:<span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">innerHeight</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">renderer</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">RD</span><span class="pl-kos">.</span><span class="pl-c1">Renderer</span><span class="pl-kos">(</span><span class="pl-s1">context</span><span class="pl-kos">)</span><span class="pl-kos">;</span>Attach to DOM
<span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-c1">body</span><span class="pl-kos">.</span><span class="pl-en">appendChild</span><span class="pl-kos">(</span><span class="pl-s1">renderer</span><span class="pl-kos">.</span><span class="pl-c1">canvas</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
Get user input
<span class="pl-s1">gl</span><span class="pl-kos">.</span><span class="pl-en">captureMouse</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">renderer</span><span class="pl-kos">.</span><span class="pl-c1">context</span><span class="pl-kos">.</span><span class="pl-en">onmousedown</span> <span class="pl-c1">=</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">e</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> ... <span class="pl-kos">}</span>
<span class="pl-s1">renderer</span><span class="pl-kos">.</span><span class="pl-c1">context</span><span class="pl-kos">.</span><span class="pl-en">onmousemove</span> <span class="pl-c1">=</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">e</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> ... <span class="pl-kos">}</span><span class="pl-s1">gl</span><span class="pl-kos">.</span><span class="pl-en">captureKeys</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">renderer</span><span class="pl-kos">.</span><span class="pl-c1">context</span><span class="pl-kos">.</span><span class="pl-en">onkey</span> <span class="pl-c1">=</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">e</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> ... <span class="pl-kos">}</span>
Set camera
<span class="pl-k">var</span> <span class="pl-s1">camera</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">RD</span><span class="pl-kos">.</span><span class="pl-c1">Camera</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-s1">camera</span><span class="pl-kos">.</span><span class="pl-en">perspective</span><span class="pl-kos">(</span> <span class="pl-c1">45</span><span class="pl-kos">,</span> <span class="pl-s1">gl</span><span class="pl-kos">.</span><span class="pl-c1">canvas</span><span class="pl-kos">.</span><span class="pl-c1">width</span> <span class="pl-c1">/</span> <span class="pl-s1">gl</span><span class="pl-kos">.</span><span class="pl-c1">canvas</span><span class="pl-kos">.</span><span class="pl-c1">height</span><span class="pl-kos">,</span> <span class="pl-c1">1</span><span class="pl-kos">,</span> <span class="pl-c1">1000</span> <span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-s1">camera</span><span class="pl-kos">.</span><span class="pl-en">lookAt</span><span class="pl-kos">(</span> <span class="pl-kos">[</span><span class="pl-c1">100</span><span class="pl-kos">,</span><span class="pl-c1">100</span><span class="pl-kos">,</span><span class="pl-c1">100</span><span class="pl-kos">]</span><span class="pl-kos">,</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">,</span><span class="pl-c1">0</span><span class="pl-kos">,</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">,</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">,</span><span class="pl-c1">1</span><span class="pl-kos">,</span><span class="pl-c1">0</span><span class="pl-kos">]</span> <span class="pl-kos">)</span><span class="pl-kos">;</span>
Create and register mesh
<span class="pl-k">var</span> <span class="pl-s1">mesh</span> <span class="pl-c1">=</span> <span class="pl-c1">GL</span><span class="pl-kos">.</span><span class="pl-c1">Mesh</span><span class="pl-kos">.</span><span class="pl-en">fromURL</span><span class="pl-kos">(</span><span class="pl-s">"data/mesh.obj"</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-s1">renderer</span><span class="pl-kos">.</span><span class="pl-c1">meshes</span><span class="pl-kos">[</span><span class="pl-s">"mymesh"</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-s1">mesh</span><span class="pl-kos">;</span>
load and register texture
<span class="pl-k">var</span> <span class="pl-s1">texture</span> <span class="pl-c1">=</span> <span class="pl-c1">GL</span><span class="pl-kos">.</span><span class="pl-c1">Texture</span><span class="pl-kos">.</span><span class="pl-en">fromURL</span><span class="pl-kos">(</span><span class="pl-s">"mytexture.png"</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">minFilter</span>: <span class="pl-s1">gl</span><span class="pl-kos">.</span><span class="pl-c1">LINEAR_MIPMAP_LINEAR</span><span class="pl-kos">,</span> <span class="pl-c1">magFilter</span>: <span class="pl-s1">gl</span><span class="pl-kos">.</span><span class="pl-c1">LINEAR</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">renderer</span><span class="pl-kos">.</span><span class="pl-c1">textures</span><span class="pl-kos">[</span><span class="pl-s">"mytexture.png"</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-s1">texture</span><span class="pl-kos">;</span>Compile and register shader
<span class="pl-k">var</span> <span class="pl-s1">shader</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">GL</span><span class="pl-kos">.</span><span class="pl-c1">Shader</span><span class="pl-kos">(</span><span class="pl-s1">vs_code</span><span class="pl-kos">,</span> <span class="pl-s1">fs_code</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-s1">renderer</span><span class="pl-kos">.</span><span class="pl-c1">shaders</span><span class="pl-kos">[</span><span class="pl-s">"phong"</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-s1">shader</span><span class="pl-kos">;</span>
Add a node to the scene
<span class="pl-k">var</span> <span class="pl-s1">node</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">RD</span><span class="pl-kos">.</span><span class="pl-c1">SceneNode</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-s1">node</span><span class="pl-kos">.</span><span class="pl-c1">color</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span><span class="pl-c1">1</span><span class="pl-kos">,</span><span class="pl-c1">0</span><span class="pl-kos">,</span><span class="pl-c1">0</span><span class="pl-kos">,</span><span class="pl-c1">1</span><span class="pl-kos">]</span><span class="pl-kos">;</span> <span class="pl-s1">node</span><span class="pl-kos">.</span><span class="pl-c1">mesh</span> <span class="pl-c1">=</span> <span class="pl-s">"mymesh"</span><span class="pl-kos">;</span> <span class="pl-s1">node</span><span class="pl-kos">.</span><span class="pl-c1">texture</span> <span class="pl-c1">=</span> <span class="pl-s">"mytexture.png"</span><span class="pl-kos">;</span> <span class="pl-s1">node</span><span class="pl-kos">.</span><span class="pl-c1">shader</span> <span class="pl-c1">=</span> <span class="pl-s">"phong"</span><span class="pl-kos">;</span> <span class="pl-s1">node</span><span class="pl-kos">.</span><span class="pl-c1">position</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">,</span><span class="pl-c1">0</span><span class="pl-kos">,</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">;</span> <span class="pl-s1">node</span><span class="pl-kos">.</span><span class="pl-en">scale</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-c1">10</span><span class="pl-kos">,</span><span class="pl-c1">10</span><span class="pl-kos">,</span><span class="pl-c1">10</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-s1">scene</span><span class="pl-kos">.</span><span class="pl-c1">root</span><span class="pl-kos">.</span><span class="pl-en">addChild</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
Create main loop
<span class="pl-en">requestAnimationFrame</span><span class="pl-kos">(</span><span class="pl-s1">animate</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">function</span> <span class="pl-en">animate</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-en">requestAnimationFrame</span><span class="pl-kos">(</span> <span class="pl-s1">animate</span> <span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-s1">last</span> <span class="pl-c1">=</span> <span class="pl-s1">now</span><span class="pl-kos">;</span>
<span class="pl-s1">now</span> <span class="pl-c1">=</span> <span class="pl-en">getTime</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">dt</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1"><span class="pl-token" data-hydro-click="{"event_type":"code_navigation.click_on_symbol","payload":{"action":"click_on_symbol","repository_id":24465246,"ref":"master","language":"Markdown","originating_url":"https://github.com/jagenjo/rendeer.js","user_id":null}}" data-hydro-click-hmac="3503c1b6e24e7fde15a0a731f44b0d221cd954ec9e5c3b200c42a60e9c443704">now</span></span> <span class="pl-c1">-</span> <span class="pl-s1">last</span><span class="pl-kos">)</span> <span class="pl-c1">*</span> <span class="pl-c1">0.001</span><span class="pl-kos">;</span>
<span class="pl-s1">renderer</span><span class="pl-kos">.</span><span class="pl-en"><span class="pl-token" data-hydro-click="{"event_type":"code_navigation.click_on_symbol","payload":{"action":"click_on_symbol","repository_id":24465246,"ref":"master","language":"Markdown","originating_url":"https://github.com/jagenjo/rendeer.js","user_id":null}}" data-hydro-click-hmac="3503c1b6e24e7fde15a0a731f44b0d221cd954ec9e5c3b200c42a60e9c443704">render</span></span><span class="pl-kos">(</span><span class="pl-s1">scene</span><span class="pl-kos">,</span> <span class="pl-s1">camera</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">scene</span><span class="pl-kos">.</span><span class="pl-en">update</span><span class="pl-kos">(</span><span class="pl-s1">dt</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>
