3dstreet
3dstreet copied to clipboard
Glass and glossy surfaces should be reflective
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
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
sample working in local branch but PBR specular highlights not working in oculus quest
Check this awesome example of a-frame refraction: https://glitch.com/edit/#!/aframe-refraction-system?path=README.md%3A1%3A0
Most recent glitch by @srothst1 based on feedback from Don M. https://glitch.com/edit/#!/thin-adhesive-archaeopteryx
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.
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:
- github CI test fails because of new lock file changes
- 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
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."
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)
Update the loader used on the individual vehicle models.
Another helpful snippet example: https://twitter.com/ianpetrarca/status/1475992621516472324?s=20
Individual models ready https://github.com/3DStreet/3dstreet-assets/issues/16
@kfarr here I essentially need to
- update the assets folder with the correct vehicle assets.
- 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.
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).
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
works now