3dstreet icon indicating copy to clipboard operation
3dstreet copied to clipboard

Glass and glossy surfaces should be reflective

Open kfarr opened this issue 4 years ago β€’ 14 comments

Partial solution, needs environment map applied to (some or all) gltf materials

See: https://github.com/donmccurdy/aframe-extras/blob/master/src/misc/cube-env-map.js https://stackoverflow.com/questions/59625510/aframe-gltf-model-demo-with-envmap https://stack-59625510.glitch.me/ https://stackoverflow.com/questions/60013557/how-to-add-equirectangular-environment-map-to-gltf-model-in-a-frame

kfarr avatar May 05 '20 04:05 kfarr

Check out this interesting post on PBR workflow from blender - the screenshot is a nice guide for creating textures for threejs https://github.com/KhronosGroup/glTF-Blender-IO/issues/60

kfarr avatar May 09 '20 21:05 kfarr

sample working in local branch but PBR specular highlights not working in oculus quest

kfarr avatar May 12 '20 05:05 kfarr

Check this awesome example of a-frame refraction: https://glitch.com/edit/#!/aframe-refraction-system?path=README.md%3A1%3A0

kfarr avatar Sep 08 '20 19:09 kfarr

Most recent glitch by @srothst1 based on feedback from Don M. https://glitch.com/edit/#!/thin-adhesive-archaeopteryx

kfarr avatar Dec 04 '21 05:12 kfarr

I was able to update the glitch to fix syntax errors so that it no longer reports any console errors: https://glitch.com/edit/#!/3dstreet-environment-testing?path=index.html%3A4%3A29

However, it does not appear to make any visual difference on the scene. Further, the vehicles do not seem to have glass rendered in this version.

My guess is that we (I?) have not pushed the most recent version of multi material gltf loader to the street component npm version that is being used in that glitch.

kfarr avatar Dec 05 '21 01:12 kfarr

Ok confirmed that 3dstreet component is using old version of gltf-part-plus component that does not support multi-material

However when I attempt to upgrade to 0.0.4 I encounter 2 issues:

  1. github CI test fails because of new lock file changes
  2. some parts are not found - specifically buildings, dividers and people

I was able to solve 1. with manual hacking of the lock file, but we should work on upgrading dependencies and lock file version soon as this will keep being a blocker in the future.

For 2 I should go back to the gltf-part-plus repo and use reproduce the same error where parts are not found to diagnose

kfarr avatar Dec 05 '21 23:12 kfarr

From our offline discussion (@kfarr): "Regarding the gltf-part-plus loader, it seems like we are going with the middle-ground solution. We will have the vehicles stored in separate glTF files but keep the characters packed together in a single glTF file. In addition, we will try to move away from storing all glb files in the assets folder of 3dstreet. Rather, we will store them in 3dstreet-assets."

srothst1 avatar Dec 08 '21 19:12 srothst1

Suggested checklist of next steps:

  • Isolate the "legacy" gltf-part-plus that works as expected with 1 material; this should probably live in the 3dstreet repo and not the separate repo; also need to import anisotropy component?
  • keep existing behavior with for dividers, pedestrians, micro-mobility, existing buildings
  • new behavior in this release to use individual glb files instead of a combined file for all objects that require reflection, specifically vehicles in this release (buildings for a future release)
  • identify are there already individual glb exports for vehicles or do they need to be requested from gnanasai? what is the directory structure for these vehicles? (probably in a subdir since there will be many)
  • use regular gltf loader for these objects (for each vehicle)
  • update the mixins for these objects (for each vehicle)

kfarr avatar Dec 12 '21 02:12 kfarr

Update the loader used on the individual vehicle models.

srothst1 avatar Dec 21 '21 18:12 srothst1

Another helpful snippet example: https://twitter.com/ianpetrarca/status/1475992621516472324?s=20

kfarr avatar Dec 29 '21 03:12 kfarr

Individual models ready https://github.com/3DStreet/3dstreet-assets/issues/16

kfarr avatar Dec 29 '21 04:12 kfarr

@kfarr here I essentially need to

  1. update the assets folder with the correct vehicle assets.
  2. Edit assets.js and make sure that each vehicle mixin is using the correct vehicle asset.

Anything else? Should I update the loader that is being used for the vehicle mixins? If so, which loader should I use? I assume that I can update the loader used for a mixin the same way I would edit the scale of an asset.

srothst1 avatar Jan 05 '22 14:01 srothst1

Yes, although I think we are still wanting to tackle a proper "proof of concept" of proper reflection by setting environment map on an individual vehicle asset (a simple standalone scene), and then we can implement that in the app using the steps you describe (and a few more).

kfarr avatar Jan 06 '22 00:01 kfarr

Also for the loader we'll just the built-in gltf loader from A-Frame (instead of the custom gltf-part-plus component): https://aframe.io/docs/1.2.0/components/gltf-model.html

kfarr avatar Jan 06 '22 00:01 kfarr

works now

kfarr avatar Jan 03 '24 16:01 kfarr