3dstreet / 3dstreet Goto Github PK

From Maximus on A-Frame Slack:

No snap turn made it quite hard to navigate. But i see the hands and can teleport 👍

I think this means:

• once positional stick crosses 50% thresh-hold in right or left direction, then add or subtract 45 degrees from current camera rig rotation with a rate limiter of every 1 second if held down

• bus idle and moving
• car idle and moving

<a-mixin id="tram" gltf-model="#trammodel" sound="src: #tram-pass-mp3;positional:true;distanceModel:inverse;refDistance:5;rolloffFactor:3;volume: 1"></a-mixin>

• audio artifacts on playback using positional audio, likely due to the overly complex scene that is skipping frames in Oculus Quest headset.
• Further, those are not the perfect variable settings as the tram is in motion which results in quieter audio when it approaches and leaves (but correct while it is nearby) so more tweaking will be necessary for this specific use case.

• use url shortening service to create "send to xr headset" or "send to phone"
• sending to phone shows XR mini scene ?
• xr mini scene sends back orientation of AR phone back for perspective "inside" computer screen

See https://glitch.com/edit/#!/questpbr?path=README.md

processSegments is the "meat" of the application and mixes Streetmix segment JSON parsing with creating DOM elements for A-Frame rendering. The logic should be separated so that it can be better tested and modular.

instead of a gltf object use:

• slightly elevated highly reflective silver rail (box)
• ground level no reflection dark black for inner trench for wheel flanges (plane)

current: ~3k tris and 24 draw calls per rail lane
after: 20 tris, 4 draw calls per rail lane

user testers want to go inside a building

• bonus - be able to take stairs or elevator up to the roof to see the scene from the top

• Reduce asset loading time by only using cubemaps
• Right now sphericalenvmap is used on the ocean plane, this could be just envmap instead, but then it would duplicate loading these textures until this issue resolved: bryik/aframe-cubemap-component#14

the fence is taking way to many draw calls
fix it!

Streetmix.net inverts turn lane orientation when displaying in the lane, see streetmix/streetmix#683

Streetmix3D displays the "true" value according to the DB, but this results in confusion:
https://twitter.com/SounderBruce/status/883431538385276932

Perhaps turn lane orientations should be inverted for now as a "hacky" fix so that people see in 3D what they expect from the 2D visual.

• desktop mode on any street url (such as http://localhost:8080/?#https://streetmix.net/kfarr/12)
• click sound icon to enable audio, hear current street's ambient environment audio
• enter a new street in the URL bar (such as https://streetmix.net/kfarr/45)
• notice the new street audio does not play
• workaround: click on the play button

possible solutions:

• better messaging of current behavior (reset icon to red x when loading new street?)
• create a new component "playme" that autoplays the asset if global sound enable constant is true

Load:
https://kfarr.github.io/streetmix3d/#https://streetmix.net/kfarr/36

Click VR in the lower-right hand corner

Audio should start, it doesn't appear to be. But when leaving VR audio can be heard

user testing - user wishes to have a pier to go out on the water without falling in

purchased domain name options: 4d.city or streetmix3d.com

what is the benefit of this? is it worth the effort?

pros to using custom domain:

• shorter url
• can control gzip settings to make gltfpack a reasonable solution #4
• opens the door to more dynamic features and authentication (firebase)

pros to keeping existing github pages url:

• less maintenance
• indicates to user that the project is still a "developer" product and a work in progress
• retains value for streetmix.net to offer simpler interface wrapping of streetmix3d as part of premium service

• nicer texture - pbr optional - try out a few from cgaxis as well as look at existing library
• combine adjacent segments where "isSidewalk" is true to have one combined polygon
• include properly sized curb
• max anisotropic filtering since this is a noticeable texture in the horizon

Optimizing the building (scenesmall2.glb) in the demo scene, you can drop it from 360 draw calls to 3 draw calls just by running it through gltfpack (although I had to un-draco-ify it first).

That will increase file size a bit (from 1.6mb to 2.6mb after gzip) but 1MB of that is just the billboard textures, which could probably be removed for streetmix's purposes. I thought adding Draco back to the asset afterward would get it back down to the same size, but for some reason it didn't help further.

I didn't test on any other assets in the folder, but gltfpack can be a pretty worthwhile tool a lot of the time. :)

When entering VR mode testers found it disconcerting to be placed in the middle of a roadway to collide with moving vehicles. Prefer to start on a sidewalk or other pedestrian refuge

• Serializer - convert DOM to JSON, allow for appending more elements to the JSON
• Deserializer - convert JSON to DOM elements, add them to the scene

Features:

• support parent / child entity nesting
• support any components
• modular to be used in other applications

the hash striping is too dense and does not match the other roadway striping from north america / california

Right now objects such as trees, safe hit bollards, light posts, etc. are cloned with a very cumbersome approach to create new entities, each with its own entity that loads and parses a new glTF model for each of the cloned entities. This results in many draw calls and time to load and parse each object.

I think we can reduce draw calls and speed up the loading process by cloning in a more intelligent manner.

I tried A-Frame geometry merger to no avail: #8 (comment)

Things to try:

• Try using the gltf-part component. Start with one type of object - lamp posts for instance. Put all of them in one glTF file. Their relative position many need to be "reset" and I have modified the gltf-part component here to try to do that.
• If that works, then create a new "master" blender file and export to glTF for all combined street props that are frequently repeated: trees, benches, light posts, etc.

What is proper way to use export and import both for the project and for testing -- ideally with ES6 modules (esm) so that code can be viewed and used directly without an intermediary build step?

Amazing piece of work. I would like to be able to glue a series of Streetmix together to create a 3D scape. Allowing me to show a bus stop bypass or a narrow section of a road.

testing A-Frame components -- what level of DOM setup / destroy is needed and can it be shared among other tests, need to look at A-Frame component code examples

I bought a license for this pack:
https://syntystore.com/products/polygon-town-pack

Need to combine meshes into 5 or 6 building (or lot level) variants

try gltf pack this time?

To reproduce:

• Use a low speed or throttled internet connection
• Load a streetmix3d street
• See that the Streetmix URL is not populated for a long time, until the street is loaded

Proposed solution:

• Try swapping lines 855 and 856 in this file:
  https://github.com/kfarr/streetmix3d/blob/master/src/aframe-streetmix.js#L855

For example, if there were a grant for $250k from mozilla or knight:

• Mozilla mixed reality initiatives - how support mozilla things? Hubs? Firefox Realities? ECS / A-Frame?
• How does that mix into streetmix? How benefit streetmix: visual design, current conditions, advocacy goals, better seamless integration?
• Streetmix3d - technical things (performance improvements); lower load time (both 3d/2d); mobile accessibility (3d/2d)
• What is value to community / planners / engineers / agencies based on user interviews from March 2020?

also have models for these from town or city pack

A few good writeups:

• Doppler effect in threejs: mrdoob/three.js#16289
• Web audio: https://gamedevelopment.tutsplus.com/tutorials/creating-dynamic-sound-with-the-web-audio-api--cms-24564
• JS example: https://github.com/cemrich/js-motor-sound-generation

First MVP:

• Write a basic A-Frame component that alters pitch and/or playback rate for an entity's looping sound

• user wishes to go inside of car, train and trolley

Issue:

• Right now the building block is a fixed GLTF exported from the asset pack that I purchased from sketchfab.

Impact:

• The buildings do not reflect settings from a streetmix street's json configuration
• There are more buildings on the "back" of the block than necessary
• The buildings do not fill up the entire block

Instead:

• Buildings should be separated (either in one or multiple GLTFs) so that they can be placed programmatically along the entire block based on a streetmix scene's json configuration

Phase 1: (this ticket) Separate the buildings "as is" with identical height regardless of streetmix json configuration -- use the same height as the current GLTF file
Phase 2: (later ticket) Ability to programmatically change height of buildings using the building "levels" from the asset pack

• Using Streetmix3D with a URL such as "https://streetmix.net/-/1095767" does not work
• Proposed solution, modify this function:
  https://github.com/kfarr/streetmix3d/blob/master/src/streetmix-utils.js#L2
• If the creatorId = - then omit this querystring value in the resultant URL, so that an input of value of https://streetmix.net/-/1095767 returns https://streetmix.net/api/v1/streets?namespacedId=1095767

you can see 2 catenary wires on the trains sometimes when loading a scene -- is the scene being loaded twice?

how to reproduce reliably?

• slash or not slash in the base project url?
• these two functions seem almost identical and might both be firing: processURLChange and locationHashChanged
  https://github.com/kfarr/streetmix3d/blob/master/src/aframe-streetmix-loaders.js#L74
  and
  https://github.com/kfarr/streetmix3d/blob/master/src/aframe-streetmix-loaders.js#L96

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

bryik/aframe-cubemap-component#13 fixed, so use that

for example
https://www.turbosquid.com/3d-models/3d-model-palm-tree/960474

• reduce complexity of buildings (reduce the size and number of parts and buildings)
• reduce draw calls by merging geometries in blender
• create named parts for each building that can be referenced in A-Frame to construct larger blocks
• use some sort of optimization or compression scheme such as draco or meshopt / gltfpack

consider addressing "low hanging fruit" for poor performance

• benchmark current performance of high complexity scene
• fix buildings to be lighter (such as gltf packing per #6)
• Try geometry merger for cloned items: https://github.com/supermedium/superframe/tree/master/components/geometry-merger
• Other "known" complex things that could be simplified: ground, rails

User tester requested "fishies in water". Also crickets.

Maybe some birds too?

• seagulls / ocean sound for seaside building type
• no sound for parking lot (or occasional car alarm? idle vehicles? beeping reverse indicator?)
• people sound for multiuse - current ambient noise
• nature sound for empty grass lot

Test user reports:

Sound level is really low. Wasn't really able to hear something until I turned the volume to the max.

Issue:

• Tram SFX is nonpositional but low (0.3)
• BG ambient audio is positional

Instead:

• Tram SFX should be higher but positional (testing needed)
• BG should be nonpositional but low

See here for example
https://github.com/planetvoodoo/aframe-html5-loader/blob/master/pvloader.js

~5k triangles from sky box

could be reduce to a handful if using this component:
https://github.com/bryik/aframe-cubemap-component

Can use this to convert equirectangular to skyboxes:
https://jaxry.github.io/panorama-to-cubemap/

safehits have a black rubber base, not colored white

it has three 116 and that has cool new things like better pbr
https://discourse.threejs.org/t/pbr-material-looks-too-shiny-in-three-js/16666/3?u=kfarr

115 to 116 makes ground component too bright, replace with textures

replace ground placement with json

• old tram / streetcar sound

Can base it off of my reply to this thread:
http://forums.streetmix.net/t/request-top-down-view/103/3

• User tester expects bus (and cars, other vehicles) to move as well as trains

Next steps:

• modify bus model to separate wheel from body frame
• re-attach wheels as children entities to the bus
• rotate wheels in correlation with velocity of vehicle and size of rims: https://courses.lumenlearning.com/physics/chapter/6-1-rotation-angle-and-angular-velocity/
• if this works, create separate tickets for other vehicles