THREE.sRGBEncoding influences 3D Assets? Related to Loading 3D Model

Discussion
, ,
1

Some time ago, while studying Loading 3D Models, I encountered a island model that didn’t respond to any type of lighting. However, upon using renderer.outputEncoding = THREE.sRGBEncoding, the model displayed vibrant colors.

Upon reevaluation, I noticed the model contained a ‘textures’ folder, comprising images that wrap around the model.

Could this issue stem from the model not accepting any color due to its texture setup, or could it be related to the type of mesh used?

I’m interested in discussing this further.

  • Have you encountered similar issues?
  • What should one expect when obtaining models from platforms like Sketchfab?
  • Additionally, do you have any tips for newcomers starting to load models?

I’ll share the code below:

  import * as THREE from 'three';
  import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
  import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
  import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
  import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';

  let scene, camera, renderer, controls, model, model02, environment, pmremGenerator

  //Renderer
  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.toneMapping = THREE.ACESFilmicToneMapping;
  renderer.toneMappingExposure = 1;
  renderer.outputEncoding = THREE.sRGBEncoding;
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );


  //Camera
  camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
  camera.position.set( 0, 5, 15 );

  // Scene
  scene = new THREE.Scene();

  //Environment
  /* environment = new RoomEnvironment();
  pmremGenerator = new THREE.PMREMGenerator( renderer );
  scene.environment = pmremGenerator.fromScene( environment ).texture; */
  

  //Directional Light
  const light = new THREE.DirectionalLight( 0xff00ff, 100 );
  light.position.set( 0, 0, 0 ); //default; light shining from top
  light.castShadow = true; // default false
  scene.add( light );

  //Set up shadow properties for the light
  light.shadow.mapSize.width = 512; // default
  light.shadow.mapSize.height = 512; // default
  light.shadow.camera.near = 0.1; // default
  light.shadow.camera.far = 10; // default

  //Create a helper for the shadow camera (optional)
  const helper = new THREE.CameraHelper( light.shadow.camera );
  scene.add( helper );

  //Ambient Light
  const ambientLight = new THREE.AmbientLight( 0x06000b, 100 );
  scene.add( ambientLight );

  //Axes
  scene.add(new THREE.AxesHelper(500))

  //Controls
  controls = new OrbitControls( camera, renderer.domElement );
  controls.update();

  //Background
  new RGBELoader().load( 'royal_esplanade_4k.hdr', function ( texture ) {
  texture.mapping = THREE.EquirectangularReflectionMapping;
  scene.background = texture;
  scene.environment = texture;} );

  // Shiba
  new GLTFLoader().load( 'models/shiba/scene.gltf', result => {
    model = result.scene;
    scene.add( model );
    model.position.set(7, 1, 3);
    model.receiveShadow = true;
    animate();
  });

  // Island
  new GLTFLoader().load( 'models/background/bg.gltf', result => {
    model02 = result.scene;
    scene.add(model02);
    model02.receiveShadow = true;
    animate();
  });
    
    function animate() {
      requestAnimationFrame( animate );
      controls.update();
      renderer.render( scene, camera );
    }

I uploaded the island model to anyone who wants to make a test with the lights.
island.rar (7.4 MB)

2

For a better understanding of the topic, I suggest you study the following guide about color spaces and color management: Color Management in three.js.

Also notice that renderer.outputEncoding = THREE.sRGBEncoding; is legacy code. In recent three.js versions it should be renderer.outputColorSpace = THREE.SRGBColorSpace;. But since THREE.SRGBColorSpace is the default output color space, there is no need to set it explicitely.

1 Like