This demo uses WebGLRenderer and the environment map is not working, the model is black:
This demo is exactly the same, except uses WebGPURenderer instead:
The only difference between both examples is on lines 34-35.
// const renderer = new THREE.WebGPURenderer({
const renderer = new THREE.WebGLRenderer({
and
const renderer = new THREE.WebGPURenderer({
// const renderer = new THREE.WebGLRenderer({
Is this a bug to report on GitHub?
You are missing to define the mapping type of the environment map. WebGPURenderer
is more tolerant in that regard. Add this:
envmap.mapping = THREE.EquirectangularReflectionMapping;
BTW: You must also define the color space of the texture. Also consider to use setAnimationLoop()
and avoid using a point light. It has essentially no effect with pure metals.
Update code:
WebGPURenderer: three.js dev template - module - JSFiddle - Code Playground
WebGLRenderer: https://jsfiddle.net/ozkL9cfp/1/
5 Likes
Ah thanks. Totally non-obvious for 3js n00bs (like me obviously
).
Should WebGLRenderer default to that too, like WebGPURenderer, for simplicity for n00bs? I’m guessing equirectangular reflection mapping (“HDRI”) is the most common env map.
Seems like it would be useful for certain things to default to certain color spaces. For example, would anyone want NoColorSpace as a default for an envmap? I think those are always color right?
Or for example, .map
could default to SRGBColorSpace treatment in the shader.
What if there were more helpful automatic settings? F.e.
- a new
THREE.AutoColorSpace
could be the default for texture color space (.map
would be treated with SRGBColorSpace
by default, etc).
- and a new
THREE.AutoMapping
would be the default texture mapping (an envmap would be treated with equi reflection mapping by default, etc).
That way total n00bs like me can get something that simply works out of the box, with various settings automatically applied based on common scenarios.