Three.js r187 Release New Features Explained: WebGPU Fixes, New Materials and the Breaking Changes to Check

three.js r187 release new features explained — a 3D game scene rendered with three.js

Illustrative image: a 3D game scene rendered with three.js — the browser library behind countless web games, product viewers and data visualisations. Image: Wikimedia Commons.

TL;DR — three.js r187 release new features explained in one line: published to npm on 30 October 2026 and announced on 31 October, the 187th monthly release of the web's most-used 3D library is a stability-and-cleanup update — it removes code deprecated since r177, sharpens WebGPU rendering and adds new material controls, but the removals mean some older projects will need small fixes before upgrading.

📌 KEY HIGHLIGHTS

What shipped: three.js r187 (npm package three@0.187.0), published 30 October 2026 and announced 31 October — the library's 187th monthly release.
The headline change: all code deprecated in r177 is now removed, so projects still using those old APIs will break until they are updated — check the official migration guide first.
WebGPU keeps maturing: dozens of WebGPURenderer fixes, plus ProxyNodeMaterial renamed to NodeMaterialInstance and a simpler way to register custom lights.
New material controls: an EON rough-diffuse lighting model and min/max iridescence thickness for MeshPhysicalMaterial, for more realistic rough and rainbow-sheen surfaces.
Scale check: three.js still dwarfs its rivals at roughly 7.1 million weekly npm downloads, against about 315,000 for Babylon.js.

three.js r187 release new features explained: what actually shipped?

Three.js is the open-source JavaScript library that puts 3D graphics in the browser without plugins — product configurators, browser games, architectural walkthroughs and data visualisations all run on it. Ricardo Cabello (known as mrdoob) first published it in 2010, and it has shipped on a monthly rhythm ever since. Version numbers work differently here: releases are revisions (r187), published to npm as 0.187.0, and any release may remove an API.

Release r187 is not a feature-fireworks update. Reading the official changelog, the bulk of the work is the unglamorous kind that keeps a 16-year-old library healthy: rendering-backend fixes across WebGL and WebGPU, geometry and memory fixes, and colour-management corrections. The single change most developers will feel is the removal of everything deprecated in r177 — three.js gives deprecated APIs a ten-release warning window, and r187 is where that window closes. If your project is several revisions behind, upgrade in steps and read the migration guide for r186→r187 before jumping.

One more versioning quirk is worth knowing: because the package version starts with 0, npm's caret range behaves unusually — ^0.186.1 accepts 0.186.2 but never 0.187.0. If you pin with a caret, r187 will not arrive automatically; you have to bump the version deliberately.

What is new in three.js r187 — the changes that matter

Area	What changed in r187	Who feels it
Breaking removals	Code deprecated in r177 removed across the library	Anyone upgrading from r177 or older APIs
WebGPU renderer	`ProxyNodeMaterial` renamed to `NodeMaterialInstance`; lights now register with `registerNode()` instead of `renderer.library.addLight()`; parallel pipeline compilation in `compileAsync()`	WebGPU and TSL developers
Materials	EON rough diffuse BRDF added; iridescence thickness min/max properties on MeshPhysicalMaterial	Artists and anyone chasing realistic surfaces
WebGL renderer	FrustumArray support, a new `getProgramVariant()` API, viewport pixel-ratio fix, better geometry and texture disposal	Existing WebGL projects
Colour and textures	`setStyle()` accepts negative hues and decimal percentages; colour-space conversion order fixed; `mipmapsAutoUpdate` and compressed cube textures on WebGPU	Projects with custom colours or compressed textures
Performance	BatchedMesh sort-corruption fix and merged draw calls; tree-shaking improvements for unused maths classes; leaner node builds	Scenes with many objects

The WebGPU thread is the strategic one. Three.js added its WebGPU renderer alongside the classic WebGL renderer in r171, with automatic fallback to WebGL 2 where WebGPU is unavailable, and every release since has narrowed the gap. In 2026 all major browser engines ship WebGPU on at least some devices, and r187's long list of WebGPU backend fixes — depth textures, disposal crashes, render-target handling — is exactly the grind that turns an experimental renderer into a default one. The library's own docs still treat WebGPURenderer as the newer, faster-moving path, so production teams should pin the exact version and test before switching renderers.

three.js r187 release new features explained — example three.js code

Illustrative image: example three.js code — the library's appeal is how little code a 3D scene takes compared with raw WebGL. Image: Wikimedia Commons.

Why it matters for web developers

Three.js is infrastructure, not a headline app — which is why a quiet release still matters. Roughly 7.1 million weekly npm downloads means a huge share of the web's 3D runs through this codebase, from e-commerce product viewers to museum exhibits and browser games. A cleanup release like r187 is what keeps that infrastructure trustworthy: deprecated code leaves, long-standing rendering bugs get fixed, and the WebGPU path gets closer to the point where new projects can choose it without caveats.

For working developers the practical message is simple. New projects can start on r187 directly with npm install three. Existing projects should upgrade deliberately: read the r186→r187 migration guide, search for the removed deprecated APIs, and re-test custom lights and node materials, since those two areas changed shape in this release. If your project pins an older revision and works, there is no emergency — but each skipped release makes the eventual jump bigger, because removals keep arriving on the ten-release clock.

Should you care? ✅

Verdict: upgrade on your next planned maintenance window — not as an emergency, but do not skip the migration guide. r187 brings real WebGPU and material improvements and clears out a decade of deprecated baggage, but the r177 removals will break unmaintained code. New projects: start here. Old projects: upgrade in steps, test your lights and materials, and pin the exact version.

FAQs

What is three.js?
Three.js is a free, open-source JavaScript library for creating animated 3D graphics in web browsers. It sits on top of WebGL (and now WebGPU) and replaces hundreds of lines of low-level graphics code with simple concepts like scenes, cameras, meshes, materials and lights.

What is new in three.js r187?
The headline items are the removal of code deprecated in r177, WebGPURenderer improvements including the NodeMaterialInstance rename and simpler light registration, a new EON rough-diffuse lighting model, iridescence thickness controls, FrustumArray support in WebGLRenderer, and fixes across colour handling, textures and BatchedMesh.

Is three.js WebGPU or WebGL?
Both. Three.js offers the classic WebGLRenderer and the newer WebGPURenderer, which tries WebGPU first and falls back to WebGL 2 where WebGPU is unavailable. WebGPU is the more modern API with compute shaders and lower CPU overhead, while WebGL 2 remains the broadest-tested baseline.

How do I install three.js r187?
Run npm install three for the latest release (0.187.0), or npm install three@0.187.0 to pin this exact version. Note that a caret range on an older 0.x version will not auto-upgrade to 0.187.0 — bump the version explicitly.

Should I upgrade to three.js r187?
Yes, on a planned schedule: read the r186→r187 migration guide first, check for removed deprecated APIs and re-test custom lights and node materials. If your project is on a much older revision, upgrade in steps rather than jumping straight to r187.

Takeaway: r187 is three.js doing its homework — clearing deprecated code, hardening WebGPU and polishing materials — and that homework is what keeps the web's 3D layer moving forward. Upgrade deliberately, and let the migration guide, not guesswork, lead the way.

Follow World Tech on TechByCountry for tomorrow's update.

📸 Get tech in the last 24 hours on Instagram — follow @_techinlast24hrs for daily posts (9 AM–9 PM) and reels at 12:30 PM & 8:30 PM.

TechByCountry — Daily Tech News, Country by Country

Search This Blog