mrdoob / mrdoob/three.js

DoubleSided transmission unsupported with `WEBGL_multisampled_render_to_texture` (Oculus Browser)

Open
#28,131 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Enhancement
Dominant language
JavaScript
Stars
116k
Forks
36.6k
Avg merge
19h 25m
Merged PRs (30d)
164

Description

Description

When transmissive materials are set to DoubleSided the transmissive objects are rendered in two passes (see: https://github.com/mrdoob/three.js/pull/25502). The back side of the transmissive objects are rendered into the transmissiveRenderTarget while using the intermediate result of the transmissiveRenderTarget. This works as the target is multi-sampled and uses two textures under the hood.

However, when the EXT_multisampled_render_to_texture is supported by the browser, it is used instead of the two textures approach. In this case rendering the back-sides fails as source and destination textures are the same.

[.WebGL-0x20170a200]GL ERROR :GL_INVALID_OPERATION : glDrawElements: Source and destination textures of the draw are the same.
Reproduction steps
  1. Setup a scene with a double sided transmissive material
  2. Open in a browser that supports WEBGL_multisampled_render_to_texture
  3. Notice the back-side not being rendered and error(s) logged in the console
Code
const geometry = new THREE.SphereGeometry( 20, 64, 32 );

const material = new THREE.MeshPhysicalMaterial( {
	metalness: 0,
	roughness: 0,
	ior: 1.5,
	envMap: /* some equirectEnvMap */ hdrEquirect,
	transmission: 1.0,
	side: THREE.DoubleSide,
} );

mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
Live example

The bug is present in both webxr_vr_sandbox and webgl_materials_physical_transmission.

Screenshots
Without WEBGL_multisampled_render_to_texture With WEBGL_multisampled_render_to_texture
image image
Version

r163

Device

Headset

Browser

Chrome

OS

Android

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue in the webxr_vr_sandbox and webgl_materials_physical_transmission examples using a double-sided transmissive MeshPhysicalMaterial in a browser supporting WEBGL_multisampled_render_to_texture. Trace the transmissiveRenderTarget handling for the back-side pass; done means the back side renders without the source/destination texture error, both with and without the extension.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
ar-vr-xr, computer-graphics
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.