Introduction — One of the technologies that Three.js uses to render 3d graphics is WebGL. WebGL like other graphics libraries (OpenGL, Direct3D) uses the graphics card (GPU) to accelerate these graphical computations. …

In this part we’re going to take an example that could potentially benefit from instancing and apply it! Well, let’s find one, and analyze it. This one seems like it will do. We would clone the repo, spin up a local server, and edit this file: https://github.com/mrdoob/three.js/blob/dev/examples/webgl_interactive_cubes.html First, let’s see…

In this part we’re going to use attempt to cull the instanced cluster and in the end see how this would be done with an abstraction. We are rendering all 2000 cubes at the moment which may not be the best idea either. Here we mostly get away with it…

This is a three part series on a somewhat broad technical 3d topic. The first part is a theoretical overview of the technique, the second part edits an existing demo to apply instancing and the last part explores optimizations. Intro Imagine we have a 3d world with lots of trees, or…

I’d like to share some thoughts on how three.js, as a framework, fits the “big picture”. Three.js does a lot of things and it can be somewhat confusing how it relates to other 3d fields. …

What are three.js materials? — Material in three.js is a high level abstraction to low level systems both WebGL and Three.js. Three.js materials all share a common base in order to be able to work with the entire rendering system. All of them share some common properties that work with low level three.js and webgl…