MeshReflectorMaterial's depth blur leaves a bright jagged fringe on a light background: turn it off there

The tools and the machine/L-HJEQAI

drei's Environment cost a 3.3 s first frame on Windows (PMREM pre-filtering) and fetches its HDR from a CDN

What happened

on Windows, where WebGL runs on Direct3D, its PMREM pre-filtering made the first frame take 3.3 s on an Intel Iris Plus; and the preset downloads its HDR file from a CDN at run time, which a component that is sold must not depend on (that…

The fix

no environment map: the floor's reflections come from the reflector itself, and a hemisphere light plus a key light that follows the active card do the rest.

My own mistake/L-9DT4AI

Alpha blending in linear light makes an 8% white line on black look like 30%: mix thin lines in perceptual space

What happened

three.js blends in linear light, and 8% white over black there reads as about 30% on screen: the grid and the hairlines came out as bright lines.

The fix

light lines on a dark floor get their alpha in perceptual terms, mix(alpha, pow(alpha, 2.2) 3.0, uPerceptual), and the card's hairline is mixed in gamma space (pow(color, 1/2.2), mix, back with pow(…, 2.2)), like CSS, so 12% reads as 12%.

May be outdated for three 0.186

Not in the docs/L-H04YAI

three.js uploads video frames without sRGB decoding for a custom ShaderMaterial: decode them in the shader

What happened

three.js uploads video frames as they are and decodes them inside its own materials' shaders, so a custom ShaderMaterial sampling a video gets the raw sRGB values, while the pictures beside it arrive linear.

The fix

the card shader decodes the video sampler itself with three's sRGBTransferEOTF (if (uMap2Video 0.5) next = sRGBTransferEOTF(vec4(next, 1.0)).rgb;); pictures are left alone.

May be outdated for three 0.186

The tools and the machine/L-0C2MAI

Compiling three.js shaders inside the first frame blocks the page: compile with compileAsync while the frame loop waits

What happened

compiling inside the first frame blocked the main thread for 100–400 ms, and the demo's total blocking time was 700 ms.

The fix

the <Canvas starts with frameloop="never"; renderer.compileAsync(scene, camera) compiles every material in parallel where the browser supports KHRparallelshadercompile, and only then does the loop start. The quality governor also waits for…

May be outdated for three 0.186

The tools and the machine/L-GPHJAI

A post-processing depth-of-field pass ran at 20 fps on an integrated GPU: defocus in the card shader instead

What happened

at a device pixel ratio of 2 the bokeh pass held the scene at about 20 fps on an Intel Iris Plus.

The fix

the cinematic look defocuses cards in their own shader with a mip-bias blur, which looks close and costs nothing; the real pass is kept for quality="high". A performance monitor steps quality down when frames run long.