search

gkjohnson / three-gpu-pathtracer

Path tracing renderer and utilities for three.js built on top of three-mesh-bvh.
https://gkjohnson.github.io/three-gpu-pathtracer/example/bundle/index.html
MIT License
1.27k stars 125 forks source link

Skinned Geometry Support: black t-rex | Issues with Dynamic scenes #588

Closed JerryI closed 2 months ago

JerryI commented 3 months ago

Describe the bug

It seems that Dynamic scene generation is not working on Mac M1/M2 & Safari, Firefox

Skinned Geometry

Screenshot 2024-03-24 at 23 04 04

It is almost black (there is still some profile of a dinosaur visible ), while in the console

Screenshot 2024-03-24 at 23 04 37

Expected behavior

A walking dinosaur

Extra

Also once I tried to change in my project from PathTracingSceneGenerator to dynamic, however, it immediately generates an error

Screenshot 2024-03-24 at 23 06 27

About 1-2 years ago with a legacy version of Three.js and your library it did work great

Platform:

gkjohnson commented 3 months ago

I'll probably need some help digging into what these errors mean and what might be causing it if you'd like to take a look. cc @robertoranon since you were looking into some floating point texture mismatches.

The project is also going through a pretty big rework at the moment so it's likely we'll need to retest some of these platforms once it's finished.

robertoranon commented 3 months ago

sure, happy to help and make tests! This however actually works for me on both Safari 17.4 and Chrome 123.0.6312.59, while on Firefox I get the same issue reported on the top. Macbook PRO M1 Max.

But I get the same problem with Firefox also on index.html and other examples ... @JerryI which examples do you see working on Firefox? And I also did a quick test of all examples on Safari/Chrome and they all seem to be working.

gkjohnson commented 3 months ago

sure, happy to help and make tests! ... I get the same problem with Firefox also on index.html and other examples ... @JerryI which examples do you see working on Firefox?

Thanks! From the warnings it looks like it's more half float / float texture incompatibility? Maybe we need to check for more extensions? Not immediately clear to me.

JerryI commented 3 months ago

Ok, it turned out to have a more general issue. Not only dynamics

  1. Basic gLTF Safari ✅ Firefox ✅
  2. Geometry Primitives Safari ✅ Firefox ✅
  3. Phys Based materials

Safari ✅

Firefox ❌

Screenshot 2024-03-26 at 17 49 47

console output

This page is in Quirks Mode. Page layout may be impacted. For Standards Mode use “<!DOCTYPE html>”.
[index.html](https://gkjohnson.github.io/three-gpu-pathtracer/example/bundle/index.html)
THREE.WebGLProgram: Program Info Log: WARNING: Output of vertex shader 'webgl_37cc066937ccaa46' not read by fragment shader [three.module.js:20290:12](https://gkjohnson.github.io/three-gpu-pathtracer/example/bundle/node_modules/three/build/three.module.js)
WebGL warning: texSubImage: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads.
WebGL warning: readPixels: Format and type RGBA/HALF_FLOAT incompatible with this RGBA16F attachment. This framebuffer requires either RGBA/FLOAT or getParameter(IMPLEMENTATION_COLOR_READ_FORMAT/_TYPE) RGBA/FLOAT.
  1. Lego

Safari ✅

Firefox ❌

Screenshot 2024-03-26 at 17 52 59

console output

This page is in Quirks Mode. Page layout may be impacted. For Standards Mode use “<!DOCTYPE html>”.
[lego.html](https://gkjohnson.github.io/three-gpu-pathtracer/example/bundle/lego.html)
THREE.WebGLProgram: Program Info Log: WARNING: Output of vertex shader 'webgl_37cc066937ccaa46' not read by fragment shader [three.module.js:20290:12](https://gkjohnson.github.io/three-gpu-pathtracer/example/bundle/node_modules/three/build/three.module.js)
WebGL warning: generateMipmap: Tex image TEXTURE_2D level 0 is incurring lazy initialization.
WebGL warning: texSubImage: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads.
WebGL warning: readPixels: Format and type RGBA/HALF_FLOAT incompatible with this RGBA16F attachment. This framebuffer requires either RGBA/FLOAT or getParameter(IMPLEMENTATION_COLOR_READ_FORMAT/_TYPE) RGBA/FLOAT.
WebGL warning: generateMipmap: Tex image TEXTURE_2D level 0 is incurring lazy initialization.

  1. Interior Safari ✅ Firefox ✅ WOW!

  2. DOF

Safari ✅

Firefox ❌

Models are missing

Screenshot 2024-03-26 at 17 55 05

console

This page is in Quirks Mode. Page layout may be impacted. For Standards Mode use “<!DOCTYPE html>”.
[depthOfField.html](https://gkjohnson.github.io/three-gpu-pathtracer/example/bundle/depthOfField.html)
THREE.WebGLProgram: Program Info Log: WARNING: Output of vertex shader 'webgl_37cc066937ccaa46' not read by fragment shader [three.module.js:20290:12](https://gkjohnson.github.io/three-gpu-pathtracer/example/bundle/node_modules/three/build/three.module.js)
WebGL warning: texSubImage: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads.
WebGL warning: readPixels: Format and type RGBA/HALF_FLOAT incompatible with this RGBA16F attachment. This framebuffer requires either RGBA/FLOAT or getParameter(IMPLEMENTATION_COLOR_READ_FORMAT/_TYPE) RGBA/FLOAT.
  1. Skinned Geometry

Safari ✅ Looks like if it works

Screenshot 2024-03-26 at 17 42 58

JS console is empty

Firefox ❌ Black screen

Screenshot 2024-03-26 at 17 45 44

console output

This page is in Quirks Mode. Page layout may be impacted. For Standards Mode use “<!DOCTYPE html>”.
[skinnedMesh.html](https://gkjohnson.github.io/three-gpu-pathtracer/example/bundle/skinnedMesh.html)
THREE.WebGLProgram: Program Info Log: WARNING: Output of vertex shader 'webgl_37cc066937ccaa46' not read by fragment shader [three.module.js:20290:12](https://gkjohnson.github.io/three-gpu-pathtracer/example/bundle/node_modules/three/build/three.module.js)
WebGL warning: texSubImage: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads.
WebGL warning: readPixels: Format and type RGBA/HALF_FLOAT incompatible with this RGBA16F attachment. This framebuffer requires either RGBA/FLOAT or getParameter(IMPLEMENTATION_COLOR_READ_FORMAT/_TYPE) RGBA/FLOAT.
WebGL warning: drawArraysInstanced: Using format enabled by implicitly enabled extension: EXT_float_blend. For maximal portability enable it explicitly. 30
After reporting 32, no further warnings will be reported for this WebGL context.
  1. Morph

Safari works ✅

Firefox black ❌

Screenshot 2024-03-26 at 17 48 02

  1. Spot Light Safari ✅ Firefox ✅
gkjohnson commented 2 months ago

Can you check if these extensions are supported in the problem browser:

OES_texture_float_linear
EXT_color_buffer_half_float
EXT_color_buffer_float
EXT_float_blend

You can see if they're listed on this site:

https://webglreport.com/?v=2

The project refactoring is also just about done so it should be easier to take a look at what might be going on without everything changing.

JerryI commented 2 months ago

sure WebGL Report.pdf

gkjohnson commented 2 months ago

This should be fixed now in #623. It seems that firefox does not support reading half float data back from the GPU.