Blender scene

# three.js looks different from Blender? Measure the page against the render, then fix the light units, tone mapping and world https://paprika3d.com/docs/guides/threejs-looks-different-from-blender Why a three.js page draws a Blender scene flatter, darker or blown out next to its Cycles render, and how a coding agent puts the render beside the page with the paprika3d plugin's reference compare, reads the causes in look's Lighting lines, and switches tone mapping, light intensity and the HDRI environment with eval until the share of differing pixels drops. ## Why the page and the render differ A GLB carries meshes, materials, cameras and (when asked) lights. Three things that shape a Blender render do not travel with it, and one travels in different units: - **The view transform.** Blender 4.x renders through the AgX view transform unless the scene says otherwise (`view_settings.view_transform` reads `AgX` in a factory-settings Blender 4.5). A three.js `WebGLRenderer` starts with `NoToneMapping`, so bright surfaces clip to white and the rest has a different curve. three.js r186 has `THREE.AgXToneMapping`, which its shader source describes as based on Filament's version of Blender's AgX. - **The world.** Blender's World (an HDRI, or a colour) lights every surface and is what metal reflects. glTF has no place for it, so the exporter writes none, and the page has nothing to reflect until `scene.environment` is set. - **Light units.** With the exporter's default Lighting Mode (Standard), a sun's strength in W/m² is multiplied by 683 lumens per watt into lux. `GLTFLoader` puts that number into `DirectionalLight.intensity` as it is, so a sun of strength 2 arrives as an intensity of 1366, hundreds of times what three.js's lighting expects for the same brightness. - **Path tracing.** Cycles follows light as it bounces between objects. A three.js material is lit by its lights and its environment map alone: a mirror ball reflects the HDRI, not the floor it stands on, and shadows come from shadow maps that each light must be told to cast. The short fix for the first three: ```js renderer.toneMapping = THREE.AgXToneMapping; // Blender 4.x's default view transform sun.intensity /= 683; // or export with Lighting Mode: Unitless scene.environment = pmrem.fromEquirectangular(sky).texture; // the same HDRI file as the World scene.background = sky; // when the render shows the World ``` paprika3d is a Claude Code plugin and MCP server that opens a three.js page in its own headless Chrome. `reference` with `compare: true` puts the render, the page and a picture of their differences side by side, and says what share of pixels differ, overall and in a grid of regions, with the colour at each `sample` point on both. `look` names setup faults on its Lighting lines, `eval` changes the live page, and `asset_search` with `kind: "hdri"` puts the HDRI in the project that Blender and the page both read. Each change below is judged by a number, not by eye. ## Install paprika3d needs Google Chrome and Node 20.11 or later, and the Claude Code plugin needs Claude Code 2.1.118 or later. ```bash claude plugin marketplace add paprika3d/paprika3d claude plugin install paprika3d@paprika3d npm install three ``` ## The Blender scene and its render The reference is a real Cycles render, made for this guide with Blender 4.5.15 LTS (the official Linux build from download.blender.org) run headless. The scene is a grey ground, a chrome ball (Metallic 1, Roughness 0.2), a red plastic box (Metallic 0, Roughness 0.45), a sun lamp of strength 2, a 40 mm camera, and a World lit by Poly Haven's CC0 "Overcast Soil" HDRI, which `asset_search` picked into the project's `assets/hdri/` first so both renderers read the same file: ```text asset_search {"cwd": "", "kind": "hdri", "pick": "polyhaven-overcast_soil"} Saved assets/hdri/polyhaven-overcast_soil.hdr (Overcast Soil, CC0-1.0) ``` The render settings: Cycles on the CPU, 48 samples with the OpenImageDenoise denoiser, Blender's default 12 light bounces, 1280 × 800 so the picture has the page's aspect, view transform AgX with no look and exposure 0 (the factory defaults). The same script exports the GLB with the exporter's Cameras and Punctual Lights boxes ticked, both of which are off by default: ```python # blender -b --factory-startup --python scene.py -- import sys, math import bpy from mathutils import Vector hdri, out_png, out_glb, samples = sys.argv[sys.argv.index("--") + 1:] bpy.ops.wm.read_factory_settings(use_empty=True) scene = bpy.context.scene def material(name, color, metallic, roughness): m = bpy.data.materials.new(name) m.use_nodes = True b = m.node_tree.nodes["Principled BSDF"] b.inputs["Base Color"].default_value = (*color, 1) b.inputs["Metallic"].default_value = metallic b.inputs["Roughness"].default_value = roughness return m bpy.ops.mesh.primitive_plane_add(size=12) bpy.context.object.name = "ground" bpy.context.object.data.materials.append(material("ground", (0.3, 0.3, 0.3), 0.0, 0.8)) bpy.ops.mesh.primitive_uv_sphere_add(segments=24, ring_count=12, radius=0.5, location=(-0.65, 0.1, 0.5)) bpy.context.object.name = "chrome_ball" bpy.ops.object.shade_smooth() bpy.context.object.data.materials.append(material("chrome", (0.9, 0.9, 0.92), 1.0, 0.2)) bpy.ops.mesh.primitive_cube_add(size=0.8, location=(0.7, -0.1, 0.4), rotation=(0, 0, math.radians(30))) bpy.context.object.name = "red_box" bpy.context.object.data.materials.append(material("red_plastic", (0.8, 0.06, 0.04), 0.0, 0.45)) bpy.ops.object.light_add(type="SUN", location=(2, -2, 4)) sun = bpy.context.object; sun.name = "sun" sun.data.energy = 2.0 # W/m² sun.rotation_euler = (math.radians(45), 0, math.radians(35)) cam = bpy.data.objects.new("camera", bpy.data.cameras.new("camera")) scene.collection.objects.link(cam) cam.location = (0.4, -4.6, 1.4) cam.rotation_euler = (Vector((0, 0, 0.5)) - cam.location).to_track_quat("-Z", "Y").to_euler() cam.data.lens = 40 scene.camera = cam scene.world = bpy.data.worlds.new("world") scene.world.use_nodes = True env = scene.world.node_tree.nodes.new("ShaderNodeTexEnvironment") env.image = bpy.data.images.load(hdri) scene.world.node_tree.links.new(env.outputs["Color"], scene.world.node_tree.nodes["Background"].inputs["Color"]) scene.render.engine = "CYCLES" scene.cycles.device = "CPU" scene.cycles.samples = int(samples) # 48 scene.cycles.use_denoising = True # OpenImageDenoise scene.render.resolution_x, scene.render.resolution_y = 1280, 800 scene.render.image_settings.color_mode = "RGB" scene.render.filepath = out_png # refs/blender.png bpy.ops.export_scene.gltf(filepath=out_glb, export_format="GLB", export_cameras=True, export_lights=True, export_texcoords=False) # models/scene.glb, 13,832 bytes bpy.ops.render.render(write_still=True) ``` The exported camera keeps the render's framing: `yfov` 0.548 radians at an `aspectRatio` of 1.6. The sun arrives as `"intensity": 1366`. ## The page, as a first attempt writes it The page loads the GLB, renders through Blender's camera and keeps three.js's defaults: no tone mapping, no environment. The GLB is small enough to inline as a data URL so the block runs on its own; in a project it is `models/scene.glb`. ```html Blender scene ``` ## The tool calls, in order These replies were captured on 2026-10-28 on a Linux server with no GPU (Chrome on SwiftShader); colours and pixel shares do not depend on the GPU, and nothing here reads a frame time. Run folder paths are shortened to ``, and replies are cut to the lines discussed, with nothing reworded. The seven `sample` points are the same in every call: the sky, the soil behind the ground, the lower half of the ball, the box's left and right faces, the ball's shadow and the open ground. **1. Open the page and look.** ```text open {"url": "index.html", "cwd": ""} Opened http://127.0.0.1:39933/index.html in 0.2 s, paused at frame 0. GPU: ANGLE (Google, Vulkan 1.3.0 (SwiftShader Device (Subzero) (0x0000C0DE)), SwiftShader driver). A software renderer (no GPU): frame times here say nothing of a real GPU's. look {"sample": [[640, 30], [640, 230], [450, 430], [740, 450], [930, 450], [330, 505], [200, 700]]} Pixels: brightness 58%, colour saturation 0%, 41% near black, 56% blown out. Much of it is blown out to white. Pale: little colour. Lighting: no tone mapping (renderer.toneMapping is NoToneMapping): bright colours clip to white; ACESFilmicToneMapping, AgXToneMapping or NeutralToneMapping avoid it, and ACES also mutes saturated colours, which a bright stylised look may not want. Lighting: 1 metallic materials with no environment map (scene.environment unset): metal reflects nothing and draws black. Bake a RoomEnvironment through PMREMGenerator, or call stage() from fx.js. Colours (5 × 5 mean, in the page's pixels): (640, 30) #000000, (640, 230) #000000, (450, 430) #ffffff, (740, 450) #000000, (930, 450) #ffffff, (330, 505) #ffffff, (200, 700) #ffffff. ``` Two `Lighting:` lines name two of the four causes. The metal line is the one [the glTF model too dark guide](https://paprika3d.com/docs/guides/threejs-gltf-model-too-dark) walks through. Neither line can name the third cause, the light's units, but the Pixels line points at it: more than half the frame is blown out to white. **2. Put the render beside the page.** ```text reference {"cwd": "", "file": "refs/blender.png", "compare": true, "sample": [[640, 30], [640, 230], [450, 430], [740, 450], [930, 450], [330, 505], [200, 700]]} refs/blender.png is 1280 × 800 px. Shown: the picture, the page's look (1280 × 800) and their differences in red, each 480 px tall. 99% of pixels differ by more than 24/255 in a channel at 480 px tall. By region (4 × 4), rows top to bottom and cells left to right: 100% 100% 100% 100% / 100% 98% 100% 100% / 100% 88% 100% 100% / 100% 100% 100% 100%. Most different: top left (100%). Colours (5 × 5 mean): (640, 30): picture #6f6253, page #000000, off by -111 -98 -83; (640, 230): picture #2e2824, page #000000, off by -46 -40 -36; (450, 430): picture #b0b0b1, page #ffffff, off by +79 +79 +78; (740, 450): picture #bf5548, page #000000, off by -191 -85 -72; (930, 450): picture #d56c5e, page #ffffff, off by +42 +147 +161; (330, 505): picture #9f9f9f, page #ffffff, off by +96 +96 +96; (200, 700): picture #b2b2b2, page #ffffff, off by +77 +77 +77. ``` The page is a black sky over a white world: the box's sunlit face is pure white and its other face pure black. The camera is right, which the comparison needs, since it works pixel by pixel; the reply says so when the canvas and the picture have different aspects. **3. Read what the scene holds.** ```text eval {"code": "const lights = [];\nscene.traverse((o) => { if (o.isLight) lights.push(`${o.type} ${o.name}: intensity ${o.intensity}`); });\nreturn { toneMapping: renderer.toneMapping, environment: scene.environment, background: scene.background, lights }"} {"toneMapping":0,"environment":null,"background":null,"lights":["DirectionalLight sun: intensity 1366"]} ``` **4. The World: the same HDRI as environment and background.** This is the loading code `asset_search` replied with at the pick, run in the page: ```text eval {"code": "const { HDRLoader } = await import('three/addons/loaders/HDRLoader.js');\nconst sky = await new HDRLoader().loadAsync('assets/hdri/polyhaven-overcast_soil.hdr');\nsky.mapping = THREE.EquirectangularReflectionMapping;\nconst pmrem = new THREE.PMREMGenerator(renderer);\nscene.environment = pmrem.fromEquirectangular(sky).texture;\nscene.background = sky;\npmrem.dispose();\nreturn 'environment and background set'"} environment and background set interact {"steps": [{"wait": 1}]} reference {"cwd": "", "file": "refs/blender.png", "compare": true, "sample": [[640, 30], [640, 230], [450, 430], [740, 450], [930, 450], [330, 505], [200, 700]]} 62% of pixels differ by more than 24/255 in a channel at 480 px tall. By region (4 × 4), rows top to bottom and cells left to right: 5% 4% 0% 2% / 47% 61% 48% 41% / 100% 89% 97% 100% / 100% 100% 100% 100%. Most different: bottom left (100%). Colours (5 × 5 mean): (640, 30): picture #6f6253, page #706456, off by +1 +2 +3; (640, 230): picture #2e2824, page #39302b, off by +7 +7 +7; (450, 430): picture #b0b0b1, page #ffffff, off by +79 +79 +78; (740, 450): picture #bf5548, page #ad372e, off by -18 -30 -26; (930, 450): picture #d56c5e, page #ffffff, off by +42 +147 +161; (330, 505): picture #9f9f9f, page #ffffff, off by +96 +96 +96; (200, 700): picture #b2b2b2, page #ffffff, off by +77 +77 +77. ``` The top row of regions now matches: the sky is within 3 levels a channel. Blender and three.js map an equirectangular image the same way round here, so no rotation was needed. The lower half is still white, because the sun is still 1366. The `interact` step lets the page draw a frame of its own after the change, before the compare pictures it; the same step ran after each `eval` below and is left out of the transcripts. **5. The light units.** Divide by the exporter's 683: ```text eval {"code": "find('sun').intensity /= 683; // the exporter's lux back to Blender's W/m²\nreturn find('sun').intensity"} 2 reference {"cwd": "", "file": "refs/blender.png", "compare": true, "sample": [[640, 30], [640, 230], [450, 430], [740, 450], [930, 450], [330, 505], [200, 700]]} 60% of pixels differ by more than 24/255 in a channel at 480 px tall. By region (4 × 4), rows top to bottom and cells left to right: 5% 4% 0% 2% / 46% 54% 48% 41% / 100% 98% 97% 100% / 75% 89% 99% 98%. Most different: lower-middle left (100%). Colours (5 × 5 mean): (640, 30): picture #6f6253, page #706456, off by +1 +2 +3; (640, 230): picture #2e2824, page #39302b, off by +7 +7 +7; (450, 430): picture #b0b0b1, page #38322e, off by -120 -126 -131; (740, 450): picture #bf5548, page #ad372e, off by -18 -30 -26; (930, 450): picture #d56c5e, page #e74a3e, off by +18 -34 -32; (330, 505): picture #9f9f9f, page #cccbcb, off by +45 +44 +44; (200, 700): picture #b2b2b2, page #cccbcb, off by +25 +24 +24. ``` The share barely moves, but the samples do: the ground went from white to `#cccbcb` and the box's sunlit face from white to a saturated `#e74a3e`. What is left is the tone curve. **6. Blender's view transform.** ```text eval {"code": "renderer.toneMapping = THREE.AgXToneMapping;\nreturn 'AgX'"} AgX reference {"cwd": "", "file": "refs/blender.png", "compare": true, "sample": [[640, 30], [640, 230], [450, 430], [740, 450], [930, 450], [330, 505], [200, 700]]} 5% of pixels differ by more than 24/255 in a channel at 480 px tall. By region (4 × 4), rows top to bottom and cells left to right: 0% 0% 0% 0% / 1% 4% 3% 0% / 2% 59% 4% 0% / 0% 0% 0% 0%. Most different: lower-middle centre-left (59%). Colours (5 × 5 mean): (640, 30): picture #6f6253, page #7a6f61, off by +11 +13 +14; (640, 230): picture #2e2824, page #39302b, off by +11 +8 +7; (450, 430): picture #b0b0b1, page #3c342f, off by -116 -124 -130; (740, 450): picture #bf5548, page #af4e41, off by -16 -7 -7; (930, 450): picture #d56c5e, page #ce6c5c, off by -7 0 -2; (330, 505): picture #9f9f9f, page #b6b6b6, off by +23 +23 +23; (200, 700): picture #b2b2b2, page #b6b5b6, off by +4 +3 +4. ``` From 99% to 5%. The open ground is within 4 levels, and the box's sunlit face within 7. The difference left sits in one region, the one holding the ball. **7. ACES, the tone mapping most forum answers suggest, against the same render.** ```text eval {"code": "renderer.toneMapping = THREE.ACESFilmicToneMapping;\nreturn 'ACES'"} ACES reference {"cwd": "", "file": "refs/blender.png", "compare": true, "sample": [[640, 30], [640, 230], [450, 430], [740, 450], [930, 450], [330, 505], [200, 700]]} 64% of pixels differ by more than 24/255 in a channel at 480 px tall. By region (4 × 4), rows top to bottom and cells left to right: 16% 9% 3% 4% / 46% 57% 48% 41% / 100% 98% 100% 100% / 100% 100% 100% 100%. Most different: bottom left (100%). Colours (5 × 5 mean): (640, 30): picture #6f6253, page #766754, off by +7 +5 +1; (640, 230): picture #2e2824, page #241e1a, off by -10 -10 -10; (450, 430): picture #b0b0b1, page #28211d, off by -136 -143 -148; (740, 450): picture #bf5548, page #bb2825, off by -4 -45 -35; (930, 450): picture #d56c5e, page #eb523f, off by +22 -26 -31; (330, 505): picture #9f9f9f, page #cecece, off by +47 +47 +47; (200, 700): picture #b2b2b2, page #cecece, off by +28 +28 +28. ``` ACES is a different curve from AgX: brighter ground, darker soil, a more saturated red. A Blender 4.x render compared with an ACES page differs on 64% of its pixels for that reason alone. (A render from Blender 3.x went through Filmic by default, and three.js has no Filmic tone mapping.) **8. Split the tone curve from the lighting.** Rendering the scene once more in Blender with the view transform set to Standard (no tone curve) and comparing it with the page on `NoToneMapping` tests the lighting alone: ```text eval {"code": "renderer.toneMapping = THREE.NoToneMapping;\nreturn 'no tone mapping'"} no tone mapping reference {"cwd": "", "file": "refs/blender-standard.png", "compare": true, "sample": [[640, 30], [640, 230], [450, 430], [740, 450], [930, 450], [330, 505], [200, 700]]} 9% of pixels differ by more than 24/255 in a channel at 480 px tall. By region (4 × 4), rows top to bottom and cells left to right: 0% 0% 0% 0% / 1% 4% 16% 0% / 4% 69% 42% 1% / 0% 0% 4% 0%. Most different: lower-middle centre-left (69%). Colours (5 × 5 mean): (640, 30): picture #706455, page #706456, off by 0 0 +1; (640, 230): picture #352f2b, page #352f2b, off by 0 0 0; (450, 430): picture #c8c8ca, page #38322e, off by -144 -150 -156; (740, 450): picture #cf4e46, page #ad372e, off by -34 -23 -24; (930, 450): picture #ff5b50, page #e74a3e, off by -24 -17 -18; (330, 505): picture #a8a8a8, page #cccbcb, off by +36 +35 +35; (200, 700): picture #cdcdcd, page #cbcaca, off by -2 -3 -3. ``` Without a tone curve on either side, the sky and soil match to within one level and the open ground to within 3. So the sun at 2 and the HDRI at strength 1 light the ground as Cycles does, and the sky's offset of 11 to 14 levels in step 6 comes from the two AgX implementations, not from the lighting. **9. Shadows.** The glTF file does not say which lights cast shadows, so the page turns them on itself: ```text eval {"code": "renderer.toneMapping = THREE.AgXToneMapping;\nrenderer.shadowMap.enabled = true;\nconst sun = find('sun');\nsun.castShadow = true;\nsun.shadow.mapSize.set(2048, 2048);\nsun.shadow.normalBias = 0.02;\nObject.assign(sun.shadow.camera, { left: -3, right: 3, top: 3, bottom: -3 });\nsun.shadow.camera.updateProjectionMatrix();\nscene.traverse((o) => { if (o.isMesh) { o.castShadow = o.name !== 'ground'; o.receiveShadow = true; o.material.needsUpdate = true; } });\nreturn 'shadows on'"} shadows on reference {"cwd": "", "file": "refs/blender.png", "compare": true, "sample": [[640, 30], [640, 230], [450, 430], [740, 450], [930, 450], [330, 505], [200, 700]]} 4% of pixels differ by more than 24/255 in a channel at 480 px tall. By region (4 × 4), rows top to bottom and cells left to right: 0% 0% 0% 0% / 1% 4% 3% 0% / 1% 57% 2% 0% / 0% 0% 0% 0%. Most different: lower-middle centre-left (57%). Colours (5 × 5 mean): (640, 30): picture #6f6253, page #7a6f61, off by +11 +13 +14; (640, 230): picture #2e2824, page #39302b, off by +11 +8 +7; (450, 430): picture #b0b0b1, page #3c342f, off by -116 -124 -130; (740, 450): picture #bf5548, page #af4e41, off by -16 -7 -7; (930, 450): picture #d56c5e, page #ce6c5c, off by -7 0 -2; (330, 505): picture #9f9f9f, page #ababab, off by +12 +12 +12; (200, 700): picture #b2b2b2, page #b6b5b6, off by +4 +3 +4. ``` A last `look` has no Lighting line left. The changes from steps 4, 5, 6 and 9 go into the page's source, after the GLB loads. ## What is still different, and why The last comparison leaves 4% of pixels apart, and each sample says where: - **The lower half of the ball** (`#b0b0b1` in the render, `#3c342f` on the page). In the render the chrome reflects the grey ground plane under it and the red box beside it. On the page it reflects the environment map, which is the HDRI's dark soil below the horizon, and no other object. This is the region that stays at 57%. A rasterizer needs a reflection probe (a `CubeCamera` rendering the scene into the ball's `envMap`) or screen-space reflections to come closer. - **The box's shaded face** (16 levels darker in red with AgX, 34 without any tone mapping). Cycles adds light that the bright ground bounces onto the box; three.js computes no bounces, so the face gets the sun and the environment map alone. - **The soft dark under the ball** (12 levels lighter on the page). The shadow map darkens where the sun is blocked; Cycles also darkens where the ball hides the sky from the ground. Baked ambient occlusion or an SSAO pass approximates it. - **The sky, 11 to 14 levels brighter.** Step 8 shows this is the tone curve: three.js's AgX and Blender's are not the same function. ## What paprika3d does not do It does not run Blender or read a .blend file: the render is a picture made in Blender and saved in the project. It does not change the page: the agent makes each change with `eval` and then in the source. `reference` measures how far two pictures differ at a threshold of 24/255 a channel; it does not say which setting caused a difference, which is why the steps above change one thing at a time. It does not path trace, so a three.js page can come close to a Cycles render in light and colour but not in bounced light and reflections of other objects. ## Pitfalls - **Tick Cameras and Punctual Lights in the glTF exporter.** Both are off by default; without the camera the page cannot reuse the render's framing, and without the lights the page is lit by whatever it adds. - **Lighting Mode: Unitless exports a sun's strength as is.** A sun of strength 2 then reads `"intensity": 2` in the file, with no division needed on the page. Standard mode is the glTF specification's physical units, which three.js does not scale back. - **Set `camera.aspect` from the canvas.** The exported camera's `yfov` is correct for the render's 1.6 aspect; a page of another shape crops it, and `reference` cannot compare pixel by pixel. - **Shadow acne.** Without `normalBias` the box's sunlit face read `#c36050` in place of `#ce6c5c`, speckled by its own shadow. three.js r186 also warns that `PCFSoftShadowMap` has been removed and uses `PCFShadowMap`. - **Texture colour space is a separate question.** A colour texture not tagged sRGB washes out whatever the tone mapping; [the colours washed out guide](https://paprika3d.com/docs/guides/threejs-colors-washed-out) covers it. ## Without paprika3d Save the page's canvas with `renderer.domElement.toDataURL()` right after a render (or with `preserveDrawingBuffer: true`), and lay it over the Blender render in an image editor in difference mode; ImageMagick's `compare -metric AE -fuzz 10%` counts differing pixels from the command line. The three.js editor and the Khronos glTF Sample Viewer open a GLB with an environment and a choice of tone mapping, a quick way to see how much of the gap is the page's setup. In Blender, the Color Management panel under Render Properties shows the view transform the render used. Written by the paprika3d agent on 2026-10-28, reviewed weekly. Every code sample on this page ran in the harness before publishing. Updated 2026-10-28.