Skip to content
learn
Global menu

three.js for C#/Java developers — Mission

Why I’m learning this

Section titled “Why I’m learning this”

Guitar Alchemist draws a guitar neck in 3D, an ocean, a solar system and a few dozen other scenes with three.js. Some of them use the new WebGPURenderer and its shading language, TSL; most still use WebGLRenderer and hand-written GLSL. As a C# developer, I know WPF’s Viewport3D and a little MonoGame. three.js looks like both at first: a scene graph, a camera, meshes and lights. Then the details differ: the renderer can pick WebGPU or WebGL behind my back, a hex color is not the number the shader receives, a light’s intensity is in candela, and a model arrives as a glTF file that needs its own decoders.

This course learns three.js as it is in September 2026, not as most tutorials show it: WebGPURenderer first, setAnimationLoop instead of requestAnimationFrame, TSL instead of ShaderMaterial, three/addons imports, Timer instead of Clock, HDRLoader instead of RGBELoader.

Who this course is for

Section titled “Who this course is for”

You are comfortable with C# or Java, and you have followed JavaScript for C#/Java developers and TypeScript for C#/Java developers, or know their content: ES modules and npm, async and await, classes, structural types. Lesson 9 uses React; the React (Vite) course covers what it needs. No prior 3D experience is required, but if you have used WPF 3D, MonoGame or JavaFX 3D, each lesson says what carries over.

three.js in one table

Section titled “three.js in one table”
WPF 3D MonoGame JavaFX 3D three.js
Where it draws a Viewport3D element the game window a SubScene a <canvas> created by the renderer
Scene graph ModelVisual3D, Model3DGroup none: you draw each model Group, MeshView Scene, Group, Mesh
Axes right-handed, Y up right-handed matrices, Y up Y down right-handed, Y up
Geometry MeshGeometry3D vertex and index buffers TriangleMesh BufferGeometry
Materials DiffuseMaterial, SpecularMaterial BasicEffect, custom effects PhongMaterial physically based: MeshStandardMaterial, node materials
The loop retained: WPF renders when something changes Update and Draw, called by Game AnimationTimer renderer.setAnimationLoop(callback)
GPU API Direct3D 9 DirectX or OpenGL Direct3D or OpenGL, through Prism WebGPU, or WebGL 2 as a fallback
Shaders none HLSL effects none TSL, compiled to WGSL or GLSL
Model files none built in the content pipeline (FBX, X) none built in glTF 2.0 with GLTFLoader

The data

Section titled “The data”

The course’s own scenes are small and deterministic: a cube, a piece of guitar neck made of primitives, color patches, ten spheres in an HDR studio, a metronome written as a glTF file by a script, a fretboard to point at, a vibrating string, glowing inlays, and 10,000 note markers. Each page reports what the renderer did, and a Playwright script reads it, so the numbers in the lessons come from a run, not from memory.

The real code is GuitarAlchemist/ga at commit 05c8eda, mainly ThreeFretboard.tsx, its 3D guitar neck. GA’s React components ask for three.js 0.180, six releases behind this course. The lessons quote GA’s code where it shows a point well, including what changed since r180; the findings are in the journal.

Live demos

Section titled “Live demos”

Every lesson page runs on this site, under a folded frame below its screenshot, with a Try it panel that sets the page’s parameters, the ones the exercises use. Five complete scenes put the lessons together on a whole guitar modeled in code: a guitar to play (lesson 5), chord voicings on GA’s fretboard (lesson 13), a studio with shadows, an HDR environment and bloom (lesson 7), picks thrown on the guitar with Rapier (lesson 10), and the guitar in VR (lesson 11). A frame loads nothing until it is unfolded. The whole build weighs 9.4 MB, most of it Rapier’s two builds in WebAssembly.

By the end of this course, I will be able to

Section titled “By the end of this course, I will be able to”
  • set up a three.js project with Vite and TypeScript, and explain what WebGPURenderer does when WebGPU is missing;
  • build scenes from geometries, physically based materials and lights, with shadows, and read renderer.info to know what the GPU was asked to do;
  • keep colors right from texture to screen: color spaces, tone mapping and HDR environments;
  • load glTF models with their animations, and choose between Draco, meshopt and KTX2 compression;
  • pick objects and move the camera, write materials and effects in TSL, and post-process a scene;
  • draw thousands of objects with instancing, BatchedMesh and levels of detail, and measure the result;
  • write the same scenes with React Three Fiber, add physics with Rapier and a WebXR mode;
  • test 3D code in CI, and know what a headless browser without a GPU can and cannot check.

Outline

Section titled “Outline”
# Lesson You already know
1 Scene, camera, renderer WPF’s Viewport3D and PerspectiveCamera, MonoGame’s Game loop, JavaFX’s SubScene
2 Geometries, materials, lights and shadows MeshGeometry3D, DiffuseMaterial, BasicEffect, directional and point lights
3 Color, tone mapping and HDR environments sRGB, Color in WPF or JavaFX, HDR photos
4 Loading glTF models and animations MonoGame’s content pipeline, WPF storyboards, AnimationTimer
5 Interaction, Raycaster and camera controls hit testing in WPF, VisualTreeHelper.HitTest, JavaFX PickResult
6 TSL and node materials HLSL effects, shader graphs
7 Post-processing with RenderPipeline render targets, pixel shaders
8 Performance, measured: instancing, BatchedMesh, LOD, frustum culling instanced drawing, profilers
9 React Three Fiber and drei WPF data binding, Blazor or React components
10 Physics with Rapier in WebAssembly BEPUphysics, physics engines in games
11 WebXR Windows Mixed Reality, OpenXR
12 Tests and CI: headless rendering, compared screenshots, and their limits UI automation, snapshot tests
13 Project: GuitarAlchemist’s 3D guitar neck, ported to WebGPU the lessons before it
14 Lab: Guitar Alchemist in 3D, fifteen measured experiments lessons 8, 9, 10, 11 and 13
— Journal

The course is complete: all 13 lessons were written and checked on 16 September 2026. Lesson 14, a lab of fifteen measured experiments on Guitar Alchemist’s 3D needs, was added on 17 September. What remains to try on real hardware, a VR headset, a phone, WebGPU on Linux, is listed in the journal.

Resources

Section titled “Resources”