English for Three.js Developers
Vocabulary for developers building 3D graphics with Three.js — scenes, meshes, geometries, materials, cameras, and draw calls — for teams discussing WebGL rendering in English.
Three.js is a JavaScript library that wraps WebGL’s low-level API into a scene graph you can actually reason about — objects, lights, and cameras instead of raw buffers and shader boilerplate. Its vocabulary borrows heavily from computer graphics and game engines, so a lot of the terms will be unfamiliar even to experienced web developers. If your team builds 3D visualizations, product configurators, or WebGL experiences, here’s the English you’ll need for rendering discussions and performance reviews.
The Scene Graph
Scene — the root container that holds every object, light, and helper you want rendered; nothing shows up on screen unless it’s added to the scene. “The model loads fine but never appears — check whether it was actually added to the scene, or if it’s just sitting in memory unattached.”
Mesh — the combination of a geometry (shape) and a material (appearance) that Three.js actually renders; the fundamental visible unit in a scene.
“We’re instantiating a new mesh per particle, which is way too expensive — switch to InstancedMesh so the GPU can draw them all in one call.”
Scene graph — the hierarchical tree of objects, where each child inherits the transform (position, rotation, scale) of its parent. “Parent the wheel meshes to the car’s body object — that way the whole scene graph rotates together instead of us updating four transforms by hand.”
Geometry and Material
Geometry
A geometry defines the shape of an object — the raw vertex positions, normals, and UV coordinates, with no information about color or texture.
“The geometry is fine; the issue is on the material side — the normals look inverted, so lighting is being calculated backward.”
Material
A material defines how a geometry’s surface reacts to light — color, roughness, metalness, and which shader it uses under the hood.
“Swapping from
MeshBasicMaterialtoMeshStandardMaterialfixed the flat, unlit look — now it actually responds to the scene’s lighting.”
UV mapping
UV mapping is how a 2D texture image is wrapped onto a 3D geometry’s surface.
“The texture looks stretched on the sphere’s poles — that’s a UV mapping issue, not a texture resolution problem.”
Camera and Renderer
Camera — the object that defines the viewpoint and projection (perspective or orthographic) used to render the scene to a 2D image.
“We’re using a perspective camera for the product viewer but an orthographic one for the technical blueprint mode — the distortion-free look really matters there.”
Renderer — the object (usually WebGLRenderer) responsible for taking the scene and camera and actually drawing pixels to the canvas each frame.
“The renderer is set to the wrong pixel ratio on high-DPI screens — that’s why the edges look blurry on retina displays.”
Frustum — the pyramid-shaped volume representing everything the camera can currently see; objects outside it don’t need to be drawn.
“We added frustum culling so objects behind the camera or far off-screen skip the draw call entirely — that alone cut our frame time in half.”
Performance Vocabulary
Draw call — a single instruction sent to the GPU to render a batch of geometry; too many draw calls per frame is a common performance bottleneck.
“We went from 4,000 draw calls to about 200 by merging static geometries — the frame rate on mobile finally became usable.”
Shader uniform — a value passed from JavaScript into a shader program that stays constant across all vertices/pixels for a given draw call, like a color or time value.
“The pulsing glow effect is driven entirely by a
timeuniform we update every frame — no per-vertex animation logic needed.”
LOD (Level of Detail) — swapping a high-poly model for a simpler one as it moves farther from the camera, to save rendering cost.
“We added an LOD chain for the terrain — full detail up close, a decimated mesh past 50 meters. Distant hills don’t need 10,000 triangles.”
Common Mistakes
| Mistake | Correction |
|---|---|
| Calling any 3D object a “mesh” | Only geometry + material combos rendered as surfaces are meshes — lights and cameras are objects, not meshes. |
| Saying “the model is lagging” | Be specific: is it a draw call bottleneck, a shader compile stall, or a CPU-side animation loop issue? |
| Confusing “geometry” with “material” | Geometry is shape; material is appearance. A wireframe bug is usually a geometry issue, not a material one. |
| Treating frustum culling as automatic for everything | Three.js culls per-object by default, but custom shaders or instanced meshes sometimes need it handled manually. |
Practice Exercise
- Explain, in two sentences, the difference between geometry and material to someone new to 3D graphics.
- Write a short PR description for replacing individually rendered particle meshes with
InstancedMeshto reduce draw calls. - Draft a message to a designer explaining why a texture looks stretched on a curved surface (UV mapping), without using the word “bug.”
Related Resources
In Practice: Navigating Feedback & Collaboration
As a developer working on any project, especially one as complex as a Three.js scene, you’ll inevitably encounter feedback – not just from your immediate team but also from more senior developers or even external contributors. The way you respond to and articulate these comments is crucial for effective collaboration and ensuring the quality of your work. Often, it’s not what is said, but how it’s said that matters most, particularly when communicating in English.
A common scenario is receiving a code review comment like this: “This geometry looks a little sparse; could you consider using a more detailed mesh for the character? Perhaps explore some pre-built assets or break down the model into smaller parts to optimize performance.” The key here isn’t just understanding the technical suggestion – improving geometry density – but framing your response professionally. A simple, defensive “That’s not my problem” won’t cut it. Instead, a reply like, “Thanks for pointing that out! I was aiming for a lightweight model initially to keep the scene performance high, but you raise a good point about potential optimization. Let me investigate some pre-built assets and see if we can balance visual fidelity with rendering speed.” demonstrates engagement, willingness to learn, and acknowledges the feedback’s value. Similarly, in Slack conversations discussing PR descriptions, clear and precise language is paramount. A vague “Fixed bug” won’t suffice; you need to explain what was fixed, why it was broken, and how your solution addresses the issue.
Another frequent situation involves discussing technical details with a colleague during a pair-programming session. You might be explaining your approach to creating a custom material: “I’m using THREE.ShaderMaterial here to achieve this specific look – essentially, I’ve created a shader that calculates the color based on the position of the vertex in 3D space.” While technically correct, it can sound dense. A more approachable phrasing might be, “I’m leveraging shaders to control the material’s appearance dynamically; the shader is reacting to the object’s location within the scene, creating this shifting color effect.” Using terminology like “leveraging” and explaining the effect rather than just the technical implementation helps your colleague understand the context and purpose.
Finally, remember that concise documentation is vital for maintainability, especially when working with complex Three.js projects. Clear descriptions of variables, functions, and even comments within your code contribute to a shared understanding amongst the team.
// Example: Optimizing geometry using THREE.SimplificationParams
const simplification = new THREE.SimplificationParams();
simplification.iterations = 1; // Adjust for desired level of detail reduction
scene.traverse(object => {
if (object instanceof THREE.Mesh) {
object.geometry.computeBoundsBox();
object.geometry.optimize(() => {}); // Call optimize with a callback to handle potential errors
}
});This example demonstrates the use of THREE.SimplificationParams to reduce mesh complexity – a common technique for improving performance, and something you might discuss when addressing feedback about scene load times or rendering bottlenecks. The comment highlights the importance of careful consideration during optimization and provides a concrete tool for achieving it.