Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[blocked] use aframe anisotropy instead of 3dstreet custom component #315

Closed
2 of 3 tasks
kfarr opened this issue Jul 12, 2023 · 1 comment · Fixed by #332
Closed
2 of 3 tasks

[blocked] use aframe anisotropy instead of 3dstreet custom component #315

kfarr opened this issue Jul 12, 2023 · 1 comment · Fixed by #332
Assignees
@kfarr
Labels
sweep Assigns Sweep to an issue or pull request.

Comments

@kfarr
Copy link
Collaborator

kfarr commented Jul 12, 2023 •
edited by sweep-ai bot
Loading

[BLOCKED] - wait for next stable a-frame 1.5 release

this is now a built-in feature of a-frame and can be set at the renderer level for the entire scene: https://github.com/aframevr/aframe/pull/5309/files

task:

Checklist
  • index.html

• Add the anisotropy attribute to the renderer component in the a-scene element and set its value to 16. This can be done by modifying the a-scene element to look like this: <a-scene renderer="anisotropy: 16;">.

  • src/components/anisotropy.js
  • src/assets.js

• Search for any instances where the anisotropy component was used and remove those instances. This can be done by removing any lines of code that look like this: el.setAttribute('anisotropy', { default: 16 });.
@kfarr kfarr converted this from a draft issue Jul 12, 2023
@kfarr kfarr assigned Algorush and unassigned Algorush Aug 3, 2023
@kfarr kfarr added the sweep Assigns Sweep to an issue or pull request. label Aug 3, 2023
@sweep-ai
Copy link
Contributor

sweep-ai bot commented Aug 3, 2023 •
edited
Loading

Here's the PR! #332.

⚡ Sweep Free Trial: I used GPT-3.5 to create this ticket. You have 4 GPT-4 tickets left for the month and 0 for the day. For more GPT-4 tickets, visit our payment portal. To retrigger Sweep, edit the issue.

Step 1: 🔍 Code Search

I found the following snippets in your repository. I will now analyze these snippets and come up with a plan.

Some code snippets I looked at (click to expand). If some file is missing from here, you can mention the path in the ticket description.

3dstreet/index.html

Lines 1 to 204 in 4038898

<!DOCTYPE html>
<html>
<head>
<!-- aframe -->
<script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
<!-- 3dstreet -->
<script src="./dist/aframe-street-component.js"></script>
<!-- mapbox -->
<script src="./src/lib/aframe-mapbox-component.min.js"></script>
<!-- save / load -->
<script src="./src/json-utils.js"></script>
<!-- ocean -->
<script src="./src/components/ocean-plane.js"></script>
<title>3DStreet</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="ui_assets/favicon.ico">
<link rel="stylesheet" href="src/viewer-styles.css">
</head>
<body>
<!-- viewer ui start -->
<div class="viewer-header-wrapper">
<button class="viewer-logo-start-editor-button" onclick="startEditor()">
<img class="viewer-logo-img" alt="3DStreet Viewer" src="ui_assets/3DStreet-Viewer-Start-Editor.svg">
</button>
</div>
<div class="right-fixed">
<ul class="right-menu">
<li onclick="buttonScreenshotTock()"> <a class="camera" href="#"> <span> Capture image as PNG </span> <img src="ui_assets/camera-icon.svg"> </a></li>
<li onclick="inputStreetmix()"> <a class="load" href="#"> <span> Load Streetmix URL </span> <img src="ui_assets/streetmix-logo.svg"> </a></li>
<!-- <li onclick="inputJSON()"> <a class="load" href="#"> <span> Load JSON String </span> <img src="assets/ui_assets/upload-icon.svg"> </a></li> -->
<li><a class="load"> <label for="inputfile" style="display: inherit; align-items: center; cursor: pointer"> <input type="file" id="inputfile" style="display:none" accept=".js, .json, .txt"> <span> Load JSON File </span> <img src="ui_assets/upload-icon.svg"></label></a></li>
<li> <a id="custom-enter-vr-button" class="vr" href="#"> <span class="vr">Enter VR mode</span> <img src="ui_assets/vr-icon.svg"> </a></li>
</ul>
</div>
<a-scene
vr-mode-ui="enterVRButton: #custom-enter-vr-button;"
vr-mode-ui-if-headset
renderer="colorManagement: true; physicallyCorrectLights: true;"
inspector="url: //3dstreet.app/dist/3dstreet-editor.js"
notify
>
<a-assets>
<!-- uncomment the line below to load assets from local github submodule -->
<!-- <street-assets url="./assets/"></street-assets> -->
<!-- uncomment the line below to load all possible asset categories -->
<!-- <street-assets categories="sidewalk-props people people-rigged vehicles vehicles-rigged buildings intersection-props segment-textures segment-colors lane-separator stencils vehicles-transit dividers sky grounds"></street-assets> -->
<!-- a reduced set of assets for non-animated streetmix streets without intersections -->
<street-assets categories="loud-bicycle sidewalk-props people vehicles vehicles-rigged buildings segment-textures segment-colors lane-separator stencils vehicles-transit dividers sky grounds"></street-assets>
</a-assets>
<a-entity id="cameraRig" position="0 10 30" data-layer-name="Viewer" cursor-teleport="cameraRig: #cameraRig; cameraHead: #camera;" look-controls="reverseMouseDrag: true" wasd-controls="enabled: true">
<a-entity id="camera" camera="far: 1000" position="0 1.6 0" ></a-entity>
<a-entity id="leftHand" hand-controls="hand: left; handModelStyle: lowPoly; color: #ffccff"></a-entity>
<a-entity id="rightHand" hand-controls="hand: right; handModelStyle: lowPoly; color: #ffccff"></a-entity>
<a-entity id="screenshot" class="no-pause" screentock visible="false"></a-entity>
</a-entity>
<a-entity id="environment" data-layer-name="Environment" street-environment="preset: day;"></a-entity>
<a-entity id="street-container" data-layer-name="3D Street Layers" data-layer-show-children>
<a-entity id="default-street" street streetmix-loader set-loader-from-hash></a-entity>
</a-entity>
<a-entity id="reference-layers" data-layer-name="Reference Layers" data-layer-show-children>
</a-scene>
</body>
<script>
// only show VR button if headset connected
AFRAME.registerComponent('vr-mode-ui-if-headset', {
dependencies: ['vr-mode-ui'],
init: function () {
if (!AFRAME.utils.device.checkHeadsetConnected()) {
this.el.setAttribute('vr-mode-ui', 'enabled', false);
}
}
})
AFRAME.registerComponent('set-loader-from-hash', {
dependencies: ['streetmix-loader'],
schema: {
defaultURL: { type: 'string' }
},
init: function () {
// get hash from window
const streetURL = window.location.hash.substring(1);
if (!streetURL) {
return;
}
if (streetURL.includes('//streetmix.net')) {
console.log('[set-loader-from-hash]','Set streetmix-loader streetmixStreetURL to', streetURL)
this.el.setAttribute('streetmix-loader', 'streetmixStreetURL', streetURL);
} else {
// try to load JSON file from remote resource
console.log('[set-loader-from-hash]','Load 3DStreet scene with fetchJSON from', streetURL)
this.fetchJSON(streetURL);
}
// else {
// console.log('[set-loader-from-hash]','Using default URL', this.data.defaultURL)
// this.el.setAttribute('streetmix-loader', 'streetmixStreetURL', this.data.defaultURL);
// }
},
fetchJSON: function (requestURL) {
const request = new XMLHttpRequest();
request.open('GET', requestURL, true);
request.onload = function () {
if (this.status >= 200 && this.status < 400) {
// Connection success
// remove 'set-loader-from-hash' component from json data
const jsonData = JSON.parse(this.response,
(key, value) => (key === 'set-loader-from-hash') ? undefined : value );
console.log('[set-loader-from-hash]', '200 response received and JSON parsed, now createElementsFromJSON');
createElementsFromJSON(jsonData);
}
};
request.onerror = function () {
// There was a connection error of some sort
console.log('Loading Error: There was a connection error during JSON loading');
};
request.send();
}
});
function buttonScreenshotTock() {
const screenshotEl = document.getElementById('screenshot');
screenshotEl.play(); // double check playing in case we're in editor mode
screenshotEl.setAttribute('screentock', 'type', 'jpg');
screenshotEl.setAttribute('screentock', 'takeScreenshot', true);
}
function startEditor() {
var sceneEl = document.querySelector('a-scene');
sceneEl.components.inspector.openInspector();
document.querySelector('.viewer-header-wrapper').style.display = 'none';
}
// uncomment the below to autostart the editor within 2 seconds of page load
// setTimeout(() => {
// startEditor();
// }, "2000")
function inputStreetmix() {
streetmixURL = prompt("Please enter a Streetmix URL", "https://streetmix.net/kfarr/3/example-street");
setTimeout(function() { window.location.hash = streetmixURL; });
streetContainerEl = document.getElementById('street-container');
while (streetContainerEl.firstChild) {
streetContainerEl.removeChild(streetContainerEl.lastChild);
}
streetContainerEl.innerHTML = '<a-entity street streetmix-loader="streetmixStreetURL: '+streetmixURL+'""></a-entity>';
}
// JSON loading starts here
function getValidJSON(stringJSON) {
// Preserve newlines, etc. - use valid JSON
// Remove non-printable and other non-valid JSON characters
return stringJSON.replace(/\'/g, "")
.replace(/\n/g, "")
.replace(/[\u0000-\u0019]+/g,"");
}
function createElementsFromJSON(streetJSON) {
let streetObject = {};
if (typeof streetJSON == 'string') {
const validJSONString = getValidJSON(streetJSON);
streetObject = JSON.parse(validJSONString);
} else if (typeof streetJSON == 'object') {
streetObject = streetJSON;
}
streetContainerEl = document.getElementById('street-container');
while (streetContainerEl.firstChild) {
streetContainerEl.removeChild(streetContainerEl.lastChild);
}
createEntities(streetObject.data, streetContainerEl);
AFRAME.scenes[0].components['notify'].message('Scene loaded from JSON', 'success')
}
function inputJSON() {
const stringJSON = prompt("Please paste 3DStreet JSON string");
if (stringJSON) {
createElementsFromJSON(stringJSON);
}
}
function fileJSON() {
let reader=new FileReader();
reader.onload=function(){
createElementsFromJSON(reader.result);
}
reader.readAsText(this.files[0]);
}
document.getElementById('inputfile')
.addEventListener('change', fileJSON);
</script>

3dstreet/src/README.md

Lines 1 to 109 in 4038898

# Source File Description
### Screentock component
A Screentock component for [A-Frame](https://aframe.io), which allows you to take screenshots of your A-Frame scene.
#### Properties
| Property | Description | Type | Default Value |
| -------------- | ------------------------------------------------------- | -------- | ------------- |
| takeScreenshot | A flag to take a screenshot of the scene when set to true | boolean | false |
| filename | The name of the saved screenshot file | string | screenshot |
| type | The file format of the saved screenshot (jpg, png, or img) | string | jpg |
| imgElementSelector | A selector to specify the element for the screenshot image data to be copied to | selector | |
#### Usage
##### HTML
```html
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
<script src="path/to/aframe-screentock-component.min.js"></script>
</head>
<body>
<a-scene screentock>
<a-entity geometry="primitive: box" material="color: #C03546"></a-entity>
</a-scene>
</body>
```
##### JavaScript
```javascript
AFRAME.scenes[0].setAttribute('screentock', 'takeScreenshot', true);
```
### [index.js](index.js)
* The `street` component places a street in an A-Frame scene from a list of segments in a JSON blob. See the [`street` component documentation](https://github.com/3DStreet/3dstreet#a-frame-component) for more details.
* The `streetmix-loader` component uses a streetmix URL to supply a JSON blob for a `street` component on the same entity. See the [`streetmix-loader` component documentation](https://github.com/3DStreet/3dstreet#a-frame-streetmix-loader-component-api) for more details.
* This file also imports other libraries and functions partially described below.
### [assets.js](assets.js)
* This file provides the `street` component with the ability to automatically load 3D models and other assets using the A-Frame asset loader. It does this by adding them to the scene's `a-assets` block and then defining mixins pointing to these assets. The `street` component itself simply places entities with appropriate mixin names. To change the visual appearance of items in a scene, you can modify mixin settings defined in this assets.js file, or point your scene to a new assets root URL, or both!
* To set a custom URL for a scene's assets, add the following syntax to your `a-assets` block: `<streetmix-assets url="./"></streetmix-assets>`. Change "./" to your own path, or keep to use assets loaded from your local server.
* How does this work? Getting assets to be dynamically injected into an A-Frame scene is tricky because `a-assets` gets created in the document body, *after the streetmix javascript has been included in the header*. The contents of this file is a scheme to try to intercept the creation of `a-assets` and get them to wait for 3DStreet assets just like assets defined in the document body. It's not perfect, but seems to work. There a [Stack Overflow question and answer that goes into more detail on the original creation](https://stackoverflow.com/questions/64841550/a-frame-scene-initializes-before-assets-ready-when-dynamically-adding-a-asset-i/64868581#64868581) as well as [a GitHub Issue with additional questions and answers](https://github.com/3DStreet/3dstreet/issues/98).
### [aframe-streetmix-parsers.js](aframe-streetmix-parsers.js)
* `processSegments` function - takes an array of streetmix segments and render them to the DOM - this is the "main" function of the entire application
* `processBuildings` function - takes `left`, `right` and street width
* Many other (untested) helper functions
### [tested/aframe-streetmix-parsers-tested.js](tested/aframe-streetmix-parsers-tested.js) - Now with tests!
* `isSidewalk` function - for a streetmix segment name passed as string, tell me if the segment is on a sidewalk?
* `createBuildingsArray` function - create an array of dictionaries that represent a psuedorandom block of buildings for use with `create-from-json`
### [tested/streetmix-utils.js](tested/streetmix-utils.js)
These are a handful of functions ([and accompanying tests!](/test/streetmix-utils-test.js) that help deal with Streetmix URLs:
* `streetmixUserToAPI(userURL)` takes a user facing Streetmix.net URL like `https://streetmix.net/kfarr/3/a-frame-city-builder-street-only` and turns it into the API redirect URL like `https://streetmix.net/api/v1/streets?namespacedId=3&creatorId=kfarr`
* `streetmixAPIToUser(APIURL)` takes a Streetmix.net API redirect URL like `https://streetmix.net/api/v1/streets?namespacedId=3&creatorId=kfarr` and turns it into the user facing friendly Streetmix.net URL like `https://streetmix.net/kfarr/3/a-frame-city-builder-street-only`
* `calcStreetWidth` takes an array of segments (data.streets.segments from a Streetmix API JSON String response) and returns the width in meters
### [components/create-from-json.js](components/create-from-json.js)
* `create-from-json` component creates child nodes beneath the component's entity from a JSON string of an array of dictionaries that represent entities, for example:
```
<a-entity create-from-json='jsonString:
[
{"tag":"a-entity","mixin":"SM3D_Bld_Mixed_Corner_4fl","position":"0 0 0"},
{"tag":"a-entity","mixin":"SM3D_Bld_Mixed_Double_5fl","position":"0 0 5"}
]
'>
</a-entity>
```
which after being parsed turns into
```
<a-entity create-from-json=''>
<a-entity mixin="SM3D_Bld_Mixed_Corner_4fl" position=""></a-entity>
<a-entity mixin="SM3D_Bld_Mixed_Double_5fl" position="0 0 5"></a-entity>
</a-entity>
```
* does not yet support children
* Requires [/src/tested/create-from-json-utils-tested.js](/src/tested/create-from-json-utils-tested.js) which includes 2 [unit tests](/test/create-from-json-utils-test.js)!
## Modified Components from Elsewhere
### [components/ocean-plane.js](components/ocean-plane.js)
This is a component [originally written](https://samsunginter.net/a-frame-components/dist/ocean-plane.js) by [Ada Rose from Samsung Internet](https://samsunginter.net/a-frame-components/), copied here to specify a local path for water normals.
### [aframe-ground-component](https://github.com/kfarr/aframe-ground-component)
`aframe-ground-component` is a modified version of the awesome [A-Frame Environment Component](https://github.com/supermedium/aframe-environment-component/) that removes environmental geometry and skybox while leaving just the ground. It also allows for reduction in triangle count by manually specifying ground elevation resolution. See more info [here on the component doc page](https://github.com/kfarr/aframe-ground-component#parameters).
### [aframe-cubemap-component](lib/aframe-cubemap-component.js)
`aframe-cubemap-component` is a local copy of [this original cubemap sky component](https://github.com/bryik/aframe-cubemap-component/).
## Unmodified Components
See [src/lib/](lib), included here to reduce fetching libraries remotely helpful for local development in bandwidth constricted environments.
## Helpful Streetmix debugging information
Here are some tips and links from my experience "reverse engineering" Streetmix to get info out of their API.
I heavily referenced this Streetmix page which outlines all the possible segments:
https://github.com/streetmix/streetmix/blob/master/assets/scripts/segments/info.json
I learned a few things:
* Each street has a unique UUID (such as `7a633310-e598-11e6-80db-ebe3de713876`) with its own corresponding API endpoint (such as https://streetmix.net/api/v1/streets/7a633310-e598-11e6-80db-ebe3de713876)
* This UUID is not shown in the UI. It can be found by going to this URL and supplying the nameSpacedId and creatorId, such as: https://streetmix.net/api/v1/streets?namespacedId=3&creatorId=kfarr . This will redirect to the UUID API endpoint
* I wrote a quick JS helper function that takes a user facing URL on Streetmix (such as https://streetmix.net/kfarr/3/a-frame-city-builder-street-only) and transforms it into the API Redirect to find the UUID endpoint. You can find the [helper function docs here](https://github.com/kfarr/3dstreet/tree/master/src#streetmix-utilsjs).
### More Notes

3dstreet/README.md

Lines 1 to 186 in 4038898

# 3DStreet
[![Version](http://img.shields.io/npm/v/3dstreet.svg)](https://npmjs.org/package/3dstreet)
[![License](http://img.shields.io/npm/l/3dstreet.svg)](LICENSE)
![Build Status](https://github.com/3DStreet/3dstreet/actions/workflows/ci-script.yaml/badge.svg)
3DStreet creates 3D visualizations of your 2D [Streetmix.net](https://streetmix.net) streets using A-Frame and WebXR. Developers can use the same core [`street` A-Frame component](#a-frame-street-component-api) of 3DStreet for their own projects.
### Online Tool
|[Start 3DStreet](https://github.3dstreet.org/)|
|---|
_(or visit https://github.3dstreet.org)_
<img src="https://raw.githubusercontent.com/kfarr/streetmix3d/master/ui_assets/streetmix3d.jpg" />
### Quick Start - How to make your own 3D street:
* First, use <a href="https://streetmix.net">Streetmix.net</a> to create a street design. (Streetmix is a tool that lets you design, remix, and share your neighborhood street. <a href="https://github.com/streetmix/streetmix/blob/master/README.md#about">More information about Streetmix here</a>.)
* Then, save a Streetmix street after making an account to generate a unique URL for your street looking something like this: `https://streetmix.net/kfarr/3/my-awesome-street-name`
* Load https://github.3dstreet.org/, paste in your street URL, and press enter or the refresh button.
* See your Streetmix street in 3D! See instant changes to your work: Switch back to a Streetmix.net tab, make changes to your street, then reload the 3DStreet page to see the edits applied.
* For more information, please see our [3DStreet and Streetmix Tutorial](/tutorials/3DStreet-streetmix-tutorial.md).
## A-Frame component
3DStreet is built upon a custom A-Frame `street` component which is also available for you to customize for your own custom A-Frame street scenes. The `street` component takes a string of JSON and renders one or more "segments" (also known as lanes or slices) of a street and optionally buildings and ground to the left and right.
### Usage Example
[![Remix](https://cloud.githubusercontent.com/assets/674727/24572421/688f7fc0-162d-11e7-8a35-b02bc050c043.jpg)](https://glitch.com/~3dstreet-simple)
```html
<html>
<head>
<title>Street Component!</title>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-street-component.js"></script>
</head>
<body>
<a-scene gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/v1/decoders/;">
<a-entity id="mySimpleStreet" street streetmix-loader="streetmixStreetURL: https://streetmix.net/kfarr/3/" ></a-entity>
</a-scene>
</body>
</html>
```
### A-Frame `street` Component API
The `street` component creates a street made up of one or more segments as children of the entity it's attached to. It may also create buildings, ground, and place models in the scene using mixins. Creating the JSON array of segments by hand is cumbersome and typically the `streetmix-loader` component (below) is also used on the same entity to populate the street JSON from a Streetmix.net street.
| Property | Description | Default Value |
| --------- | --------- | --------- |
| JSON | A string of JSON containing an array one or more segments (also known as slices) representing cross-section parts of a street. See [basic-json.html](/examples/basic-json.html) for an example of proper usage | '' |
| type | A string representing the formatting of the JSON passed in the `JSON` property | 'streetmixSegmentsFeet' |
| left | A string to determine which [building variant](#list-of-streetmix-building-variants) to create for the left side of the street (heading outbound) | '' |
| right | A string to determine which building variant to create for the right side of the street (heading outbound). | '' |
| showGround | A boolean to determine if the ground associated with the specified building variant(s) in `left` and `right` should be created or not. | true |
| showStriping | A boolean to determine if the lane stripings should be created or not. | true |
| length | A number that sets the street's length in meters | 150 |
### A-Frame `intersection` Component API
The `intersection` component creates an intersection surface with options for adding curbs, sidewalks, crosswalks, stop signs, and traffic signals.
| Property | Description | Default Value |
| --------- | --------- | --------- |
| dimensions | Specifies the width and depth of the intersection. First value represents width, second value represents depth. | '20 20' |
| sidewalk | Sets the width of the sidewalk at each side of the intersection. Values are set in the order of west, east, north, south. | '0 0 0 0' |
| northeastcurb | Sets the curb dimensions for the north east curb. Values are updated as width, then depth. | '0 0' |
| southwestcurb | Sets the curb dimensions for the south west curb. Values are updated as width, then depth. | '0 0' |
| southeastcurb | Sets the curb dimensions for the south east curb. Values are updated as width, then depth. | '0 0' |
| northwestcurb | Sets the curb dimensions for the north west curb. Values are updated as width, then depth. | '0 0' |
| stopsign | Sets if each side of the intersection has a stop sign. Values are set in the order of east, west, north, south. 0 is false, 1 is true. | '0 0 0 0' |
| trafficsignal | Sets if each side of the intersection has a traffic signal. Values are set in the order of east, west, north, south. 0 is false, 1 is true. | '0 0 0 0' |
| crosswalk | ​​Sets if each side of the intersection has a crosswalk. Values are set in the order of east, west, north, south. 0 is false, 1 is true. | '0 0 0 0' |
### A-Frame `streetmix-loader` Component API
The `streetmix-loader` component requests a Streetmix API response when given a unique street URL and then passes the segments array JSON as a string to the `street` component (which is a dependency -- you must have the `street` component on the same entity as that of the `streetmix-loader` component).
| Property | Description | Default Value |
| --------- | --------- | --------- |
| streetmixStreetURL | A string representing a "user facing" Streetmix street URL such as https://streetmix.net/kfarr/3/ | '' |
| streetmixAPIURL | A string representing the Streetmix API street URL such as https://streetmix.net/api/v1/streets/7a633310-e598-11e6-80db-ebe3de713876 | '' |
| showBuildings | A Boolean that determines whether or not buildings are rendered | true |
Either 1 of the 2 properties are required. If both are provided the component will use streetmixAPIURL value and ignore streetmixStreetURL.
#### Orientation and Scale
A default Streetmix.net cross-section view is oriented to show vehicles heading away from you as "outbound". The `street` component follows this convention and when placed in a new A-Frame scene the default camera is looking toward the outbound direction of the generated street. The default rendering is 1:1 scale.
#### Automatic Asset Loading
When `aframe-street-component.js` is included on a page it automatically loads 3D models and other assets using the A-Frame asset loader by adding them to the scene's `a-assets` block and defining mixins pointing to these assets. The `street` component itself simply places entities with appropriate mixin names. [For more information on the asset loader see this docs link](https://github.com/3DStreet/3dstreet/blob/main/src/README.md#assetsjs).
### Additional variant strings
- The word `animated` can be added to the variantString of the type `sidewalk` to make the pedestrians animated. Here is an example of how this can be implemented:
```
{
"width": 9,
"variantString": "normal|animated",
"type": "sidewalk"
}
```
Please see `animated.html` for a demo.
### List of Supported Segment Types
3DStreet does not yet support all of the street `segments` found in Streetmix. You may find some segments don't display at all or are missing 3D elements. Here is a complete list:
| [Streetmix Segment Type](https://github.com/streetmix/streetmix/blob/master/assets/scripts/segments/info.json) | 3DStreet Support? | Variants | Notes and Model Source |
| ---------------------------- | --------- | ------ | ----- |
| sidewalk | Yes - Partial | `empty` | All variants show empty sidewalk, no pedestrian 3d models or density variants. |
| sidewalk-lamp | Yes - All | Variants: `right`, `left`, `both` Subvariants: `modern`, `traditional`, `pride` | [Modern Lamp Post](https://poly.google.com/view/2DoFKofZE6H), License [Google Poly CC Attrib](https://support.google.com/poly/answer/7418679?hl=en); [Traditional Lamp Post](https://poly.google.com/view/ez9fM9NvtRB), License [Google Poly CC Attrib](https://support.google.com/poly/answer/7418679?hl=en) |
| bike-lane | Yes - All | Variants: `regular`, `red`, `green` | No bikes shown |
| drive-lane | Yes - Partial | `car-type`: "car" and "sharrow" | Not supported: `car-type` truck and autonomous vehicle |
| turn-lane | Yes - All | `left` `right` `left-right-straight` `shared` `both` `left-straight` `right-straight` `straight` | Note: there appears to be a bug with Streetmix.net rendering of `turn-lane-orientation` variant in street cross section for `inbound` - it appears to be inverted from the street's json database value. https://github.com/streetmix/streetmix/issues/683. Note: Shared turn lane does not exhibit proper segment lane markings. |
| bus-lane | Yes - Partial | `shared` (sharrow) variant not supported | Model Credits: [New Flyer XD40 Bus](https://sketchfab.com/3d-models/new-flyer-xd40-d61e475543324d21aa24b2b208fbf3c5) |
| divider | Yes - Partial | `striped-buffer`, `bollard` | striped-buffer is rendered for all variants. Original model credit: [Flexi Guide 300 Safe Hit Post](https://3dwarehouse.sketchup.com/model/e395a74c-03f9-411e-a8fe-3664c89c6c5d/Flexi-Guide-300-Safe-Hit-Post) |
| parking-lane | Yes - Partial | | `parking-lane-direction` and `parking-lane-orientation` unsupported, parking delimiter markings unsupported |
| sidewalk-tree | Yes - All | `palm-tree`, `big` | Supports palm tree and normal ("big") street tree. Palm Tree: License [Google Poly CC Attrib](https://support.google.com/poly/answer/7418679?hl=en), [Model Source](https://poly.google.com/view/3vvQFrjtYWb), Street Tree: License [Sketchfab "Standard"](https://sketchfab.com/licenses), [Polygon City Pack](https://sketchfab.com/3d-models/polygon-city-pack-preview-5a16f543d1054fbc9ce1cb17a2ba412e) |
| sidewalk-bench | Yes - Partial | `left`, `right` | "center" bench not supported. |
| sidewalk-bike-rack | Yes - Partial | | Doesn't support height -- always at sidewalk level. No bike model yet, just the rack. Model credits: [Bike Rack by illustrationlogic](https://sketchfab.com/3d-models/bike-rack-c4aae071cc2543eeb98bcf1a76be40e4), License [CC BY NC SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/) |
| sidewalk-wayfinding | Yes - Partial | `small`, `medium`, `large` variants all render same object | All size variants render the same simple wayfinding obelisk shape with texture based on original NYC [design from Pentagram.](https://www.pentagram.com/work/walknyc). |
| parklet | No | | |
| light-rail | Yes - All | `grass` variant displays as green color asphalt | Model credits: [Siemens Avenio](https://sketchfab.com/3d-models/siemens-avenio-for-cities-skylines-7e3d9f90af9447dabcb813a4af43ae76), License [CC BY NC SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/); [Train track 2 black](https://poly.google.com/view/0LrARHcOWtE), License [Google Poly CC BY](https://support.google.com/poly/answer/7418679?hl=en) |
| streetcar | Yes - All | `grass` variant displays as green color asphalt | Model credit: [Godarville Tram](https://www.turbosquid.com/FullPreview/Index.cfm/ID/1015103), License [Turbo Squid Royalty Free](https://blog.turbosquid.com/royalty-free-license/) |
| transit-shelter | Yes - Partial | | Doesn't support height -- always at sidewalk level. |
| train | No | | No support planned, not a public Streetmix segment type. |
| scooter | Yes - All | Variants: `regular`, `red`, `green` | No scooters shown. (Treated identically to a bike lane.) |
| scooter-drop-zone | No |||
| bikeshare | Yes | `left` `right`| Rendered every 100 meters. [Original model credit](https://3dwarehouse.sketchup.com/model/8fd9d5c603e1d5d0ebab176c393922a3/Bikeshare-Station) |
| food-truck | No |||
| flex-zone | No |||
| flex-zone-curb | No |||
### List of Building Variants
"Buildings" are lots and/or objects rendered on either side of the street to add to the setting.
| [Streetmix Building Variants](https://github.com/streetmix/streetmix/blob/master/assets/scripts/segments/buildings.js) | 3DStreet Support? | Notes |
| ---------------------------- | --------- | ------ |
| grass | Yes | https://www.textures.com/download/grass0052/12094 |
| fence | Yes | Fence Model: Paid Royalty Free License [CGTrader.com T&Cs Paragraph 21](https://www.cgtrader.com/pages/terms-and-conditions) for [construction fence Low-poly 3D model](https://www.cgtrader.com/3d-models/exterior/street/construction-fence-f8cc10f2-cf56-4f1d-a87a-c60c41d50b02) |
| parking-lot | Yes | https://www.textures.com/download/roads0111/53096 |
| waterfront | Yes | Credit to [@Lady_Ada_King](https://twitter.com/Lady_Ada_King) for a-ocean-plane; @threejs for water normal jpeg; [cgskies](https://www.cgskies.com/) for sky image (paid [license](https://www.cgskies.com/about_legal.php)). Seawall Models: License [Sketchfab "Standard"](https://sketchfab.com/licenses) from [Polygon City Pack](https://sketchfab.com/3d-models/polygon-city-pack-preview-5a16f543d1054fbc9ce1cb17a2ba412e) |
| residential | Yes | Buildings: License [Synty Store EULA](https://syntystore.com/pages/end-user-licence-agreement) from [Polygon Town Pack](https://syntystore.com/products/polygon-town-pack). Does not support varying floors as specified by Streetmix JSON. |
| narrow | Yes - partial | | Buildings: License [Sketchfab "Standard"](https://sketchfab.com/licenses) from [Polygon City Pack](https://sketchfab.com/3d-models/polygon-city-pack-preview-5a16f543d1054fbc9ce1cb17a2ba412e). Does not support varying floors as specified by Streetmix JSON. |
| wide | Yes - partial | | Same as narrow. In the future this could include back alleyway, backyards, etc. ; https://www.textures.com/download/asphaltdamaged0057/46489|
### License
The 3DStreet codebase is offered under the GNU Affero General Public License v3, as specified in [the LICENSE file](LICENSE).
Assets such as 3D models, textures, and audio are offered under the [Creative Commons By Attribution Non-Commercial License](https://creativecommons.org/licenses/by-nc/4.0/), unless a more specific license is specified for each asset in the documentation on this page.
Contact [[email protected]](mailto:[email protected]) for commercial licensing.
### Developer Docs
See [this link for more information](src/README.md) about the custom components developed and modified for the project.
### Model Credits
* [Creative Commons Google Poly](https://support.google.com/poly/answer/7418679?hl=en)
* Some city / car models https://sketchfab.com/3d-models/polygon-city-pack-preview-5a16f543d1054fbc9ce1cb17a2ba412e
* Some road textures https://www.textures.com/download/roads0086/44877 https://www.textures.com/download/roads0122/55065
* Sidewalk textures https://www.textures.com/download/floorsregular0299/87153 https://www.textures.com/download/floorsregular0301/87158
* Fence model https://sketchfab.com/3d-models/chainlink-fence-low-poly-50901b0cc91b4e04a18ecd13bc379a90
* Bus stop, creative commons https://poly.google.com/view/7iBPwMlmfge
* Do something with this adorable train: https://sketchfab.com/3d-models/tram-and-rails-modular-4168da5a8b884171b4540dd33eb05ef2
* Trolley: https://sketchfab.com/3d-models/neighborhood-trolley-3bc683cca6b84d8985cc0befe710b8fa
### Audio Credits
* wide, narrow urban building variants: Ambient SF https://www.soundsnap.com/ssl_16_11_amb_ext_afternoon_alamo_square_painted_houses_park_with_birds_some_people_around_calm_city_san_francisco_st_wav
* fence, grass variants - AMB_Suburbs_Afternoon_Woods_Spring_Small Field_Bird Chirps_Low Car Rumbles_Grass_Leaves Rustle_ST_MKH8050-30.mp3
* parking-lot variant - "Parking lot ambience - long - looping.mp3" https://www.soundsnap.com/parking_lot_ambience_long_looping_wav
* waterfront variant - UKdock4.mp3 - https://www.soundsnap.com/ukdock4
* waterfront variant - Water pier underneath small waves distant traffic ambience_BLASTWAVEFX_31752.mp3 - https://www.soundsnap.com/node/96455
* residential (suburban) variant - lawn mower, etc. - AMB_Suburbs_Spring_Day_Distant Lawnmowers_Birds_Distant Traffic_Distant Plastic Windmill Spin_Truck Pass By_Plane Overhead_MS_ST_MKH8050-30.mp3 https://www.soundsnap.com/amb_suburbs_spring_day_distant_lawnmowers_birds_distant_traffic_distant_plastic_windmill_spin_truck_pass_by_plane_overhead_ms_st
* Diesel idling bus https://www.soundsnap.com/turbodiesel_bus_riding_and_idling
* Tram pass https://www.soundsnap.com/tram_pass_by_fast_wav
* Historic streetcar pass https://www.soundsnap.com/streetcar_passing_by_smoothly

3dstreet/src/components/anisotropy.js

Lines 1 to 35 in 4038898

/* global AFRAME */
AFRAME.registerComponent('anisotropy', {
schema: { default: 0 }, // default 0 will apply max anisotropy according to hardware
dependencies: ['material', 'geometry'],
init: function () {
this.maxAnisotropy = this.el.sceneEl.renderer.capabilities.getMaxAnisotropy();
// console.log('this.maxAnisotropy', this.maxAnisotropy);
['model-loaded', 'materialtextureloaded'].forEach(evt =>
this.el.addEventListener(evt, () => {
const mesh = this.el.getObject3D('mesh');
// console.log('mesh', mesh);
var anisotropyTargetValue = this.data;
anisotropyTargetValue = +anisotropyTargetValue || 0; // https://stackoverflow.com/questions/7540397/convert-nan-to-0-in-javascript
// console.log('anisotropyTargetValue', anisotropyTargetValue);
if (anisotropyTargetValue === 0) {
anisotropyTargetValue = this.maxAnisotropy;
// console.log('anisotropyTargetValue', anisotropyTargetValue);
}
mesh.traverse((object) => {
if (object.isMesh === true && object.material.map !== null) {
// console.log('object', object);
// console.log('object.material.map.anisotropy', object.material.map.anisotropy);
object.material.map.anisotropy = anisotropyTargetValue;
// console.log('object.material.map.anisotropy', object.material.map.anisotropy);
object.material.map.needsUpdate = true;
}
});
}, false)
);
}

3dstreet/package.json

Lines 1 to 66 in 4038898

{
"name": "3dstreet",
"version": "0.4.1",
"description": "Web-based 3D visualization of streets using A-Frame and WebXR",
"main": "dist/aframe-street-component.js",
"scripts": {
"dev": "budo src/index.js:dist/aframe-street-component.js --port 7001 --live",
"dist": "webpack",
"prepublish": "npm run dist",
"test": "nyc --reporter=lcov --reporter=text mocha --recursive --full-trace",
"test:watch": "mocha --recursive --full-trace --watch",
"lint": "semistandard -v | snazzy",
"lint:tested": "semistandard -v 'src/tested/**/*.js' 'test/**/*.js' | snazzy",
"lint:fix": "semistandard --fix",
"start": "npm run dev"
},
"repository": {
"type": "git",
"url": "git+https://github.com/kfarr/3dstreet.git"
},
"keywords": [
"aframe",
"aframe-component",
"aframe-vr",
"vr",
"webxr"
],
"author": "[email protected]",
"license": "AGPLv3",
"bugs": {
"url": "https://github.com/kfarr/3dstreet/issues"
},
"homepage": "https://github.com/kfarr/3dstreet#readme",
"babel": {
"presets": [
"@babel/preset-env"
]
},
"semistandard": {
"ignore": [
"/src/lib/",
"/dist/**"
]
},
"devDependencies": {
"@babel/core": "^7.12.7",
"@babel/preset-env": "^7.12.7",
"approvals": "^6.0.0",
"babel-loader": "^8.2.1",
"budo": "^11.6.4",
"jsdom": "^16.2.2",
"jsdom-global": "^3.0.2",
"mocha": "^10.1.0",
"nyc": "^15.0.1",
"pretty": "^2.0.0",
"rewire": "^5.0.0",
"semistandard": "^14.2.0",
"snazzy": "^8.0.0",
"terser-webpack-plugin": "^5.3.9",
"webpack": "^5.75.0",
"webpack-cli": "^4.2.0"
},
"dependencies": {
"aframe-atlas-uvs-component": "^3.0.0",
"latest": "^0.2.0"
}

I also found the following external resources that might be helpful:

Summaries of links found in the content:

https://github.com/3DStreet/3dstreet/blob/main/src/assets.js:

The page does not contain any relevant content or code snippets.

https://github.com/aframevr/aframe/pull/5309/files:

The page is a pull request on GitHub for the A-Frame project. The pull request adds an anisotropy property to the renderer and material for configuring it globally and per material respectively. The pull request has been merged and includes changes to several files, including material.md, renderer.md, material.js, renderer.js, and material.test.js. The changes involve adding the anisotropy property to the material and renderer components, setting default values, and handling the anisotropy property in the code. The user wants to implement this feature in their project by editing the index.html renderer, removing the anisotropy component, and removing any areas where anisotropy was applied in the assets.js file.

https://github.com/3DStreet/3dstreet/blob/main/src/components/anisotropy.js:

The page does not contain any relevant content or code snippets.

Step 2: 🧐 Snippet Analysis

From looking through the relevant snippets, I decided to make the following modifications:

File Path Proposed Changes
index.html Modify index.html with contents:
• Add the anisotropy attribute to the renderer component in the a-scene element and set its value to 16. This can be done by modifying the a-scene element to look like this: <a-scene renderer="anisotropy: 16;">.
src/components/anisotropy.js Delete src/components/anisotropy.js
src/assets.js Modify src/assets.js with contents:
• Search for any instances where the anisotropy component was used and remove those instances. This can be done by removing any lines of code that look like this: el.setAttribute('anisotropy', { default: 16 });.

Step 3: 📝 Planning

I have created a plan for writing the pull request. I am now working my plan and coding the required changes to address this issue. Here is the planned pull request:

[Blocked] Replace custom anisotropy component with built-in A-Frame feature
sweep/replace-anisotropy-component

Description

This PR replaces the custom anisotropy component in the 3DStreet project with the built-in anisotropy feature of A-Frame. The custom anisotropy component is no longer needed as A-Frame now supports anisotropy natively. The changes include modifying the index.html file to set the anisotropy at the renderer level, removing the anisotropy.js file from the codebase, and removing any areas where anisotropy was applied in the assets.js file.

Summary of Changes

  • Modified the index.html file to add the anisotropy attribute to the renderer component in the a-scene element, setting its value to 16.
  • Deleted the anisotropy.js file from the src/components/ directory.
  • Modified the assets.js file to remove any instances where the anisotropy component was used.

Please note that this PR is currently blocked and waiting for the next stable release of A-Frame (version 1.5) which includes the necessary changes for the anisotropy feature. Once the new version is released, this PR can be reviewed and merged.

Step 4: ⌨️ Coding

File Instructions Progress
index.html Modify index.html with contents:
• Add the anisotropy attribute to the renderer component in the a-scene element and set its value to 16. This can be done by modifying the a-scene element to look like this: <a-scene renderer="anisotropy: 16;">.		 ✅ Commit ab1175f
src/components/anisotropy.js Delete src/components/anisotropy.js ✅ Commit 1599fc5
src/assets.js Modify src/assets.js with contents:
• Search for any instances where the anisotropy component was used and remove those instances. This can be done by removing any lines of code that look like this: el.setAttribute('anisotropy', { default: 16 });.		 ❌ Failed

Step 5: 🔁 Code Review

Here are my self-reviews of my changes at sweep/replace-anisotropy-component.

Here is the 1st review

Great work on adding the anisotropy attribute to the renderer in the a-scene tag in index.html and removing the anisotropy component from the codebase in src/components/anisotropy.js. However, there's one more step to fully resolve the issue.

The task also mentioned removing any areas where anisotropy was applied, which is not reflected in the provided diffs. Please ensure these changes are also made. You might want to look into the src/assets.js file as it was specifically mentioned in the task.

Keep up the good work!

I finished incorporating these changes.

🎉 Latest improvements to Sweep:

  • Use Sweep Map to break large issues into smaller sub-issues, perfect for large tasks like "Sweep (map): migrate from React class components to function components"
  • Getting Sweep to format before committing! Check out Sweep Sandbox Configs to set it up.
  • We released a demo of our chunker, where you can find the corresponding blog and code.

💡 To recreate the pull request edit the issue title or description.
Join Our Discord

@sweep-ai sweep-ai bot mentioned this issue Aug 3, 2023
Closed
@kfarr kfarr self-assigned this Aug 4, 2023
@kfarr kfarr moved this from To Do to For Review in 3DStreet Dev Tracking Aug 4, 2023
@kfarr kfarr changed the title use aframe anisotropy instead of 3dstreet custom component [blocked] use aframe anisotropy instead of 3dstreet custom component Aug 23, 2023
@sweep-ai sweep-ai bot mentioned this issue Aug 23, 2023
Merged
@kfarr kfarr moved this from For Review to To Do in 3DStreet Dev Tracking Aug 28, 2023
@github-project-automation github-project-automation bot moved this from To Do - Soon to Done in 3DStreet Dev Tracking Nov 30, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kfarr kfarr

Labels
sweep Assigns Sweep to an issue or pull request.
Projects
3DStreet Dev Tracking
Status: Done
Milestone
No milestone
2 participants
@kfarr @Algorush