question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Defines in cube_uv_reflection_fragment can break MeshPhongMaterial

See original GitHub issue

Describe the bug

Short defines such as those in cube_uv_reflection_fragment can clash with user-defined materials via ShaderMaterial and built-in materials that use bsdfs (related: #22728).

To Reproduce

The above behavior can be reproduced when passing a texture from PMREMGenerator to a MeshPhongMaterial via envMap.

Code

import * as THREE from 'three';
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';

const renderer = new THREE.WebGLRenderer();

new RGBELoader().load( '/lago_disola_1k.hdr', ( texture ) => {

  const envMap = new THREE.PMREMGenerator( renderer ).fromEquirectangular( texture ).texture;

  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshPhongMaterial( { envMap } );
  const mesh = new THREE.Mesh( geometry, material );
  renderer.compile( mesh );

});

Live example

Expected behavior

Defines in cube_uv_reflection_fragment should be more specific and probably follow the existing local cubeUV_* pattern.

Screenshots

image

Platform:

  • Device: [N/A]
  • OS: [N/A]
  • Browser: [N/A]
  • Three.js version: [r143, since #18004]

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:1
  • Comments:7 (1 by maintainers)

github_iconTop GitHub Comments

3reactions
CodyJasonBennettcommented, Aug 9, 2022

@Mugen87 @mrdoob Please understand that the issue in this PR was caused by the OP using a PMREM with MeshPhongMaterial, which is not supported.

I think this issue is pretty clearly about loose defines made in cube_uv_reflection_fragment which can only cause trouble with built-in materials and user-defined materials – bsdfs being merely an example.

If MeshPhongMaterial (and also MeshLambertMaterial & MeshPhysicalMaterial) aren’t supposed to include cube_uv_reflection_fragment then remove it, but it’s not the (intentional) focus of this issue.

Edit: I see you already got it in #24475

1reaction
Mugen87commented, Aug 9, 2022

and what is the current policy on using a PMREM as a background texture?

Since we want to support background blurriness at some point, the engine potentially needs PMREM support for the background shader. #23712 implemented this feature with normal mipmaps, however, other engines actually use PMREM. So this question has to be decided first before we can update the background shader.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Three.js Materials
They define how objects will appear in the scene. Which materials you use really depends on what you're trying to accomplish. There are...
Read more >
javascript - MeshPhongMaterial doesn't appear - Stack Overflow
I am a beginner in THREE.js, I want to create a sphere which I will use to create globe ...
Read more >
Three.js: Geometries and materials - LogRocket Blog
Geometries are used to create and define shapes in Three.js. ... A value of 3 will split the surface into three smaller sides....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found