See-through glass material renders different background color

Questions
1

Hello ! I’ve been scratching my head for two days around this problem. I have a simple image and a sphere with a see-through glass type material in my scene. Here is the code :

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

import vertexShader from './shaders/vertex.glsl'
import fragmentsShader from './shaders/fragments.glsl'


export const appInit = () => {

  // Scene, Renderer, Camera
  const scene = new THREE.Scene()

  const renderer = new THREE.WebGLRenderer({ 
    canvas: document.querySelector("#c"),
    antialias: true,
 })
  renderer.setSize(window.innerWidth, window.innerHeight)
  renderer.setPixelRatio(window.devicePixelRatio)
  renderer.setClearColor(0x111111, 1)
  
  const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight)
  camera.position.set(0, 0, 5)
  camera.lookAt(0, 0, 0)

  window.addEventListener(
    'resize',
    () => {
      camera.aspect = window.innerWidth / window.innerHeight
      camera.updateProjectionMatrix()
      renderer.setSize(window.innerWidth, window.innerHeight)
    },
    false
  )

  // Sphere  
  const geometry = new THREE.SphereGeometry(1)
  const material = new THREE.MeshPhysicalMaterial({
    roughness: 0,
    transmission: 1,  
    thickness: 1,
  
  })
  const sphere = new THREE.Mesh(geometry, material)
  scene.add(sphere)


  // Text image
  const planeGeo = new THREE.PlaneGeometry( 4.56 * 1.5, 1* 1.5)
  const planeMaterial = new THREE.MeshBasicMaterial( {map: new THREE.TextureLoader().load("./images/back_text.png")} )
  planeMaterial.transparent = false
  planeMaterial.needsUpdate = true
  planeMaterial.map.minFilter = THREE.LinearFilter;

  const plane = new THREE.Mesh( planeGeo, planeMaterial )
  plane.position.set(0, 0, -5)
  scene.add( plane )
  

  // Mousemove
  const orbit = new OrbitControls(camera, renderer.domElement)
  orbit.update()

  const animate = () => {
    requestAnimationFrame(animate)
    renderer.render(scene, camera)
  }

  animate()
}

My sphere renders colors of objects in the scene correctly when looking through it but not the background color (as shown in the image below). When I put alpha : true in my renderer constructor and setClearColor(0x111111, 0);, it has the same exact effect on my html body background. It appears much lighter than it should. I tried searching for this issue but I have not found any similar case.

image
image1122×873 55.9 KB

I tried looking at this code : Simplest Orb Refraction - CodeSandbox . I imported the exact same code in my editor, it ran smoothly but there is the exact same issue, like in my scene. In the codesandbox visualizer though, everything appears fine as expected :

image
image658×528 111 KB

I tried a billion different material settings that I don’t even understand fully. Has any of you encountered the same issue ? Or do you have any clue why this is happening ?

Thank you in advance :smiling_face_with_three_hearts:

2

This is actually the (current) intended behavior and explained in detail here:

1 Like
3

Ow so the reason of the differences between my code and the codesandbox is the version. Thank you for that, however do you have any idea on how I could replicate the previous behavior ? I’m trying to recreate the effect on this page : https://www.filipporuffini.com/

image
image927×652 68.2 KB

4

Couldn’t you just avoid using a transparent background and render the text with WebGL instead?

1 Like
5

From what I’ve seen, they only render the # and what we can see through it. There is no background and it seems that they use a plane behind the # so it should not cause the problem of the color difference when we look at the background. I think I found a path to recreate the effect. Thank you for your help :innocent:.

image
image1236×918 148 KB