From 79c86965627f88ecd1e0ca69fb4311cf44ef39fb Mon Sep 17 00:00:00 2001 From: Kieran Farr Date: Sat, 23 May 2026 20:25:38 -0700 Subject: [PATCH] v1 asset docs --- ...dels-with-ai-for-creative-street-scenes.md | 6 ++ ...-with-historic-imagery-and-viewer-mode.mdx | 6 ++ ...roduct-update-ai-video-gallery-and-more.md | 6 +- .../custom-models-and-images.mdx | 95 ++++--------------- docs/contributing.md | 6 +- docs/index.md | 4 - docs/key-features/ai-rendering.md | 2 +- docs/key-features/ar-ready-export.md | 2 +- docs/key-features/asset-system.md | 61 ++++++++++++ docs/key-features/console.md | 2 +- docs/key-features/viewer-modes.md | 2 +- docs/services.md | 55 +++++------ src/pages/pricing.js | 7 +- 13 files changed, 129 insertions(+), 125 deletions(-) create mode 100644 docs/key-features/asset-system.md diff --git a/blog/2025-02-06-creating-custom-models-with-ai-for-creative-street-scenes.md b/blog/2025-02-06-creating-custom-models-with-ai-for-creative-street-scenes.md index 28939959f..dadf36683 100644 --- a/blog/2025-02-06-creating-custom-models-with-ai-for-creative-street-scenes.md +++ b/blog/2025-02-06-creating-custom-models-with-ai-for-creative-street-scenes.md @@ -8,6 +8,12 @@ image: ./images/2025-02-06/hotwheels-to-3d.webp ![A split image showing a physical toy car on the left and its 3D model counterpart in a street scene on the right](./images/2025-02-06/hotwheels-to-3d.webp) +:::info + +**May 2026 Update:** The hosting and import steps in this post (OptimizeGLB.com + paste-URL) are no longer required. 3DStreet now has a built-in custom asset upload system: drag your GLB straight into the editor and it is automatically optimized, stored in your account, and placed in the scene. The AI generation workflow below still applies — just skip steps 4 and 5 and drag-and-drop the downloaded GLB instead. **[See the updated docs on adding custom models](/docs/3dstreet-editor/custom-models-and-images)**. + +::: + Have you ever found yourself designing a street scene and wishing you had that perfect 3D model to bring your vision to life? Whether it's a unique piece of street furniture, a local landmark, or even a toy car, traditional 3D modeling can be time-consuming and requires specialized skills. But what if you could turn any object into a 3D model with just a couple of photos and some AI magic? Let's explore how to do exactly that! diff --git a/blog/2025-08-13-creating-ar-scenes-with-historic-imagery-and-viewer-mode.mdx b/blog/2025-08-13-creating-ar-scenes-with-historic-imagery-and-viewer-mode.mdx index b17f4c64f..9ba508225 100644 --- a/blog/2025-08-13-creating-ar-scenes-with-historic-imagery-and-viewer-mode.mdx +++ b/blog/2025-08-13-creating-ar-scenes-with-historic-imagery-and-viewer-mode.mdx @@ -9,6 +9,12 @@ import MuxPlayer from '@mux/mux-player-react'; # Creating AR Scenes with Historic Imagery and 3DStreet's Viewer Mode +:::info + +**May 2026 Update:** The image hosting step in this post (uploading to GitHub Pages or another web host) is no longer required. 3DStreet now supports built-in custom image upload — drag your panoramic or historic image directly into the editor and it is stored in your account automatically. The rest of the AR workflow below still applies. **[See the updated docs on adding custom images](/docs/3dstreet-editor/custom-models-and-images#uploading-custom-images)**. + +::: +
-## AI Generator for Images: Modify, Create, Inpaint, and Outpaint +## AI Generator for Images: Modify and Create In addition to video, access all our image editing tools in one place with the new 3DStreet AI Generator app. You can now: * [**Modify from Input Image**](https://3dstreet.app/generator/#modify) -- Upload your own image or select an image from your gallery as an input, then re-render the image while applying stylistic, editorial, geometrical, rendering, or other modifications using state of the art frontier image models from Google and other major providers. * [**Create from Prompt**](https://3dstreet.app/generator/#create) -- Generate a new image from a text prompt without a source image. -* [**Inpaint**](https://3dstreet.app/generator/#inpaint) -- Select a region of an input image from your gallery or uploaded and re-render just that area with a new prompt. Perfect for swapping out details or fixing specific parts of a rendering. -* [**Outpaint**](https://3dstreet.app/generator/#outpaint) -- Extend the boundaries of a generated image beyond the original frame, creating wider panoramic views of your street designs. * **Edit and iterate** -- Use the gallery to experiment with different styles and prompts on the same scene or input file to learn how they affect the final output ## Cloud Gallery with Cross-Device Sync @@ -84,7 +82,7 @@ Thanks to Mike and the StreetPlan team for their support and help to better conn ## Drag and Drop 3D Models -You can now drag and drop glTF/GLB files directly into the 3DStreet viewport to import custom 3D models. No need to go through menus -- just drop your file and place it in the scene. This can be handy for quick visualizations, however drag-and-drop models are only available during the initial session and will not be saved when you reload the scene. If you'd like your GLB image to be able to be reloaded in future sessions you'll need to use a third-party storage service. [Here's a quick video showing what you can make with this feature](https://www.youtube.com/watch?v=c9itxUUtQGE). +You can now drag and drop glTF/GLB files directly into the 3DStreet viewport to import custom 3D models. No need to go through menus -- just drop your file and place it in the scene. [Here's a quick video showing what you can make with this feature](https://www.youtube.com/watch?v=c9itxUUtQGE). ## Streetmix Schema 33 with Elevation diff --git a/docs/3dstreet-editor/custom-models-and-images.mdx b/docs/3dstreet-editor/custom-models-and-images.mdx index d64c4399b..772766a2c 100644 --- a/docs/3dstreet-editor/custom-models-and-images.mdx +++ b/docs/3dstreet-editor/custom-models-and-images.mdx @@ -3,91 +3,34 @@ sidebar_position: 6 --- import MuxPlayer from '@mux/mux-player-react'; -# Adding Custom Models and Images to 3DStreet Scenes +# Adding Custom Models and Images to a Scene -## Importing 3D Models +Need a model or image that isn't in the built-in library? Maybe you have a specific local landmark, a custom sign, a photo or map of existing conditions, or need a one-off prop? Drag the file from your computer straight into 3DStreet and it shows up in your scene. -3DStreet supports importing custom 3D models in glTF / GLB format to enhance your street scenes with unique objects and elements. +## Drag-and-drop into the editor - +1. Open a scene in the [3DStreet Editor](https://3dstreet.app/). +2. Drag a file from your computer onto the viewport — drop it where you want it placed. Supported formats: `.glb` for 3D models, `.jpg` / `.png` / `.webp` for images. +3. The file is uploaded to your account and dropped into the scene at the cursor. +4. Use the right-hand Properties panel to fine-tune scale, position, and rotation. -### Prerequisites -* GLB format 3D model files -* Public URL access to your hosted models, usually via web hosting service (e.g., Glitch.com) +## Reusing your assets -### Validation and Hosting +Every file you upload lands in the **Assets panel** on the left side of the editor, alongside the built-in library. From there you can drag the same asset into any scene as many times as you want, or into other scenes in your account — no need to re-upload. -Before importing, double check that your file is compatible with three.js by validating your GLB file at [gltf-viewer.donmccurdy.com](https://gltf-viewer.donmccurdy.com/). If your model is not compatible, you may need to convert it to a compatible format. +The Assets panel is part of a larger system that handles storage, optimization, attribution, and asset management across your account. **[Learn more about the Asset System](/docs/key-features/asset-system)**. -To host your file you will need a public URL to access it. You can use a web hosting service like Glitch.com to host your files: +## Alternative: adding by URL -* Create a [Glitch.com](https://glitch.com/) account -* Create a new project -* Upload your GLB file to the Assets section -* Copy the public URL for your model +If your model or image is already hosted on a publicly accessible URL, you can reference it directly without uploading: -### Adding Models to Your Scene +1. Click **Add Layer** → **Custom Layers** tab. +2. Choose **GLTF Model from URL** or **Place New Image Entity**. +3. Paste the public URL and click OK. -* In 3DStreet Editor, open or create a scene -* Click "Custom Layers" -* Select "GLTF model from URL" -* Paste your model's public URL -* Click OK to add the model +URL-referenced assets do not appear in your Assets panel, don't count against your quota, and don't go through 3DStreet's optimization pipeline. For most users, drag-and-drop upload is the better option. -### Adjusting Your Model +## Tips -Use the Properties panel to modify: -* Scale (adjust size on different axes) -* Position (move model within the scene) -* Rotation (orient model as needed) - - -## Importing Images - -3DStreet allows you to import custom images to add signage, existing conditions photos, maps, and other visual elements to your scenes. - - - -### Prerequisites -* Image files in JPG, PNG, or WEBP format -* Public URL for your images, usually via a web hosting service (e.g., Glitch.com) - - -### Adding Images -Host your image: - -* Upload to [Glitch.com](https://glitch.com) Assets -* Copy the public URL - -In 3DStreet Editor: - -* Click "Custom Layers" -* Select "Place New Image Entity" -* Paste your image URL -* Click OK - -### Positioning and Adjusting - -* Use Transform Controls for position -* Rotate images to face desired direction -* Adjust scale in Properties panel -* Consider mounting images on existing scene elements - -### Best Practices - -* Validate file formats before importing -* Scale elements appropriately for scene realism -* Position near relevant street features -* Use double-click to zoom for precise placement \ No newline at end of file +* If a model isn't rendering as you expect, drop the `.glb` into [gltf-viewer.donmccurdy.com](https://gltf-viewer.donmccurdy.com/) — it uses the same three.js loader 3DStreet does, so what shows up there is what you'll see in your scene. +* Use the duplicate shortcut (`d`) to repeat the same asset in multiple places without re-dragging. \ No newline at end of file diff --git a/docs/contributing.md b/docs/contributing.md index e40143f86..7b74da58b 100644 --- a/docs/contributing.md +++ b/docs/contributing.md @@ -8,8 +8,8 @@ Contributors to 3DStreet can come from various backgrounds, such as 3D artists, Some possible ways to become a contributor are: * Application Development: People proficient with JavaScript, A-Frame / Three.js / React etc can help with the development and optimization of 3DStreet. See our primary repository [3DStreet/3dstreet](https://github.com/3DStreet/3dstreet/) for the open-source 3DStreet editor codebase. -* 3D modeling: If you're skilled in 3D modeling software (e.g., Blender, 3ds Max, Maya, SketchUp), you can create and contribute 3D models of buildings, street elements, or other urban objects. [See 3d modeling guide on `3dstreet-assets-source` README.](https://github.com/3DStreet/3dstreet-assets-source#readme) -* GIS and mapping: If you have experience with geographic information systems (GIS), you can help improve the geospatial accuracy and detail of the project by incorporating real-world map data or satellite imagery. We have 3dtiles and satellite map examples but they're broken at the moment sorry. -* Documentation and tutorials: Writing documentation, creating tutorials, or making video guides can help newcomers learn how to contribute to the project and use the tools more effectively. You're reading the docs now. Peek behind the scenes with our open-source [docusaurus-based](https://docusaurus.io/) docs repo here: https://github.com/3DStreet/3dstreet-docs +* 3D modeling: If you're skilled in 3D modeling software (e.g., Blender, 3ds Max, Maya, SketchUp), you can create and contribute 3D models of buildings, street elements, or other urban objects. [See 3d modeling guide on `3dstreet-assets-source` README.](https://github.com/3DStreet/3dstreet-assets-source#readme) **The [asset system](/docs/key-features/asset-system/) allows you to upload any 3D model right away, just open the app and drag and drop to use.** +* GIS and mapping: If you have experience with geographic information systems (GIS), you can help improve the geospatial accuracy and detail of the project by incorporating real-world map data or satellite imagery. Here's an example project that leverages 3DStreet for visualization of GIS data: https://github.com/kfarr/zoningviz +* Documentation and tutorials: Writing documentation, creating tutorials, or making video guides can help newcomers learn how to contribute to the project and use the tools more effectively. You're reading the docs now. It's all based on [docusaurus](https://docusaurus.io/) and our `3dstreet-docs` repo is here: https://github.com/3DStreet/3dstreet-docs * Testing and feedback: Test the existing models, tools, and workflows, and provide feedback to improve the project. [There are some tests](https://github.com/3DStreet/3dstreet/tree/main/test) but not so great coverage. Please feel free to file an issue, [the 3DStreet repo is the best to file new issues](https://github.com/3DStreet/3dstreet/issues/new). * Community building: Engage with other contributors, help moderate forums, or organize events to promote the project and bring together people with shared interests. [Join our discord](https://discord.com/invite/VN242sx9qu). diff --git a/docs/index.md b/docs/index.md index 9a968c859..7b2bde34a 100644 --- a/docs/index.md +++ b/docs/index.md @@ -15,10 +15,6 @@ Welcome to the 3DStreet documentation.

-![Screenshot of 3 different camera perspectives from 3DStreet Editor.](/img/docs/3dstreet-editor-camera-combo-views.jpg) -
-
- **You can customize your street scene to match any configuration.** Use **3DStreet Editor** tools to modify, add, or clone objects to match an exisiting or future street configuration. [Check out the introductory Editor docs to learn the basic capabilities.](./3dstreet-editor/overview-3dstreet-editor)

diff --git a/docs/key-features/ai-rendering.md b/docs/key-features/ai-rendering.md index b25a9cc3e..9ff5eae43 100644 --- a/docs/key-features/ai-rendering.md +++ b/docs/key-features/ai-rendering.md @@ -1,5 +1,5 @@ --- -sidebar_position: 5 +sidebar_position: 2 --- # AI Rendering diff --git a/docs/key-features/ar-ready-export.md b/docs/key-features/ar-ready-export.md index 8a2c60d46..e2468171a 100644 --- a/docs/key-features/ar-ready-export.md +++ b/docs/key-features/ar-ready-export.md @@ -1,5 +1,5 @@ --- -sidebar_position: 2 +sidebar_position: 6 --- # AR Ready Export diff --git a/docs/key-features/asset-system.md b/docs/key-features/asset-system.md new file mode 100644 index 000000000..247862e17 --- /dev/null +++ b/docs/key-features/asset-system.md @@ -0,0 +1,61 @@ +--- +sidebar_position: 4 +--- + +# Asset System + +The 3DStreet Asset System is the home for everything you've added to your account — your own uploaded 3D models, custom images, videos, and other media that your scenes reference. It's available in both the **Editor** and the **Generator**, so anything you upload once is ready to use wherever you're working. + +## One panel for all your assets + +The **Assets panel** on the left side of the editor (and generator) gives you a single, browseable view of every asset in your account. From the panel you can: + +- **Filter by type** — show only meshes (`.glb` models), images, or videos to quickly narrow the list +- **Drag any asset directly into the scene** to place it where you drop it +- **Open an asset's details** to rename it, preview it, see metadata and attribution, or remove it + +Because the panel is shared across all your scenes, anything you upload once is available everywhere — no per-scene re-importing, no copy-pasting URLs between projects. + +## Uploading custom assets + +Drag any supported file from your computer onto the editor viewport or onto the Assets panel itself. Supported formats: + +| Type | Formats | +|--|--| +| 3D models | `.glb` | +| Images | `.jpg`, `.png`, `.webp` | + +The file is uploaded to your account in the background. You'll see a progress indicator in the Assets panel sidebar while the upload runs; the asset becomes draggable as soon as it's ready. For step-by-step instructions on the editor flow, see [Adding Custom Models and Images to a Scene](/docs/3dstreet-editor/custom-models-and-images). + +### Asset details + +Click any custom asset's thumbnail in the Assets panel to open its **details modal**. From there you can rename the asset, preview it in an embedded viewer, see its file size and attribution metadata, download the original file, or delete it from your account. + +## Storage and quotas + +Each account has a storage quota for uploaded assets. A quota indicator at the bottom of the Assets panel shows how much of your quota is used; it turns yellow as you approach the limit and red when you're at it. Pro and Team plans include significantly more storage — see the [pricing page](/pricing) for the storage quota included with each plan. + +Per-file size limit is **50 MB** for `.glb` uploads. Files larger than that can still be previewed in your current session — useful for very large photogrammetry scans — but won't persist to the cloud. + +If you reach your quota, new uploads run in local-only mode until you free up space (by deleting old assets) or upgrade your plan. + +## Bleeding-edge GLB optimization, automatic + +3D model optimization is normally a tedious, expert-only step that sits between "I have a model" and "it loads fast in a browser." The 3DStreet Asset System gives every user push-button access to the same leading-edge compression techniques used by professional 3D pipelines — and runs them automatically on every upload: + +- **Texture compression** — textures are re-encoded to WebP at quality 0.85 and resized down to a maximum of 2048×2048 +- **Mesh deduplication and pruning** — unused data, duplicate vertices, and orphaned nodes are removed +- **Draco mesh compression** — geometry is compressed with Draco for dramatically smaller files and faster loading +- **Bail-if-bigger** — if the optimized output is larger than the original (common when the file is already well-optimized), 3DStreet keeps the original instead +- **Already-optimized detection** — files that already use Draco + WebP skip the pipeline entirely + +Both the **original** and the **optimized** versions are stored. Scenes load the optimized version by default; the original is kept so you can re-download it, share it, or re-process it later. Only the original file counts against your storage quota — the optimized derivative is on us. + +## Attribution + +When you upload a `.glb`, 3DStreet automatically extracts attribution metadata from the file — title, author, source, and license, if present. This metadata is visible in the asset details modal and is preserved with the asset, so credits travel with the model even as you reuse it across scenes. + +## Related + +- [Adding Custom Models and Images to a Scene](/docs/3dstreet-editor/custom-models-and-images) — the editor-side how-to +- [3D Model Library](/docs/key-features/model-library) — the built-in library catalog diff --git a/docs/key-features/console.md b/docs/key-features/console.md index a583460d4..a88fa31f0 100644 --- a/docs/key-features/console.md +++ b/docs/key-features/console.md @@ -1,5 +1,5 @@ --- -sidebar_position: 4 +sidebar_position: 5 --- # Console diff --git a/docs/key-features/viewer-modes.md b/docs/key-features/viewer-modes.md index c3371fba0..fc946f60b 100644 --- a/docs/key-features/viewer-modes.md +++ b/docs/key-features/viewer-modes.md @@ -1,5 +1,5 @@ --- -sidebar_position: 3 +sidebar_position: 7 --- # Viewer Modes diff --git a/docs/services.md b/docs/services.md index fbdff390b..4bf372a01 100644 --- a/docs/services.md +++ b/docs/services.md @@ -5,34 +5,27 @@ sidebar_position: 10 ## Need help with your next project? -At 3DStreet, we do more than just make software. Our team provides consulting services to community organizations, global NGOs, government entities, individuals, and other organizations of all shapes and sizes. Here's how we can assist you: - -### Custom geospatial software -We deliver custom software projects tailored to your needs: -* Custom experiences -* Custom data integrations -* Branded interfaces -* Organization-specific functionality - -### Scene design -Bring your ideas to life with our help: -* Creation of intersections -* Custom street segments -* Other bespoke geometry - -### Custom model design -We advise on creating low-poly assets for use in realtime 3D designs, including: -* Unique buildings for context setting -* Cars and utility vehicles -* Other custom 3D models - -### Training and development -We offer training services to help your team make the most of our tools and methodologies. - -### Research partnerships -We have experience collaborating with organizations of all sizes: -* Joint grant applications -* Competitive grant proposal development -* Sub-contracting opportunities - -Interested in learning more? [Send a message to our public contact form](/contact/), or [click here to schedule a time for an intro chat](https://calendar.app.google/78XJwSVonYjy23bTA). \ No newline at end of file +At 3DStreet, we do more than just make software. Our team partners with community organizations, global NGOs, government entities, universities, and individuals to deliver impactful streetscape and mobility projects. Here's how we can assist you: + +### Community Engagement +We help you bring people into the planning process and communicate proposals clearly: +* Interactive workshops and public meetings +* Immersive 3D and AR visualizations of proposed designs +* Tools and assets to support outreach campaigns +* Facilitation support for stakeholder engagement + +### Design & Development +We deliver custom design and software work tailored to your project: +* Scene design including intersections, custom street segments, and bespoke geometry +* Custom 3D model design (buildings, vehicles, and other low-poly assets) +* Custom geospatial software, data integrations, and branded interfaces +* Organization-specific functionality and experiences + +### University and Research Partnerships +We collaborate with academic and research institutions of all sizes: +* Joint grant applications and competitive proposal development +* Sub-contracting opportunities on funded research +* Training and curriculum support for students and faculty +* Co-developed research on streets, mobility, and immersive visualization + +Interested in learning more? [Send a message to our public contact form](/contact/), or [click here to schedule a time for an intro chat](https://calendar.app.google/78XJwSVonYjy23bTA). diff --git a/src/pages/pricing.js b/src/pages/pricing.js index e2ff83104..b467dacba 100644 --- a/src/pages/pricing.js +++ b/src/pages/pricing.js @@ -13,6 +13,7 @@ export default function PricingPage() { privacy: 'public', features: [ 'Store unlimited scenes', + '100 MB custom asset storage', 'Prototype street configurations', 'Access hundreds of 3D models', 'Import from Streetmix and StreetPlan', @@ -33,11 +34,11 @@ export default function PricingPage() { privacy: 'public', features: [ 'Everything in Free, plus:', - 'Download JPEG snapshots without watermark', + 'Download image snapshots without watermark', 'Unlimited Geospatial 3D Maps', + '5 GB custom asset storage', <>AI Token100 AI generation tokens per month, - 'Import custom 3D models', - 'Reference custom SVG and glTF files', + 'Reference custom SVG path files', 'Export "AR Ready" glTF for Augmented Reality apps', 'Multiple street section support' ],