You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: End-to-end glTF to polished WebXR app workflow.
4
+
slug: city-builder-jr-gltf-to-webxr-pipeline
5
+
authors: kfarr
6
+
tags: [webxr, gltf, citybuilderjr]
7
+
image: https://i.imgur.com/mErPwqL.png
8
+
hide_table_of_contents: false
9
+
---
10
+
11
+
This is an awesome blog post about City Builder Jr.
12
+
- It is a cool app
13
+
- There was a problem -- it's hard to create an end-to-end pipeline from creating models in Blender, converting those source assets for use on the web, hosting and then making those assets available to your application through an asset catalog. As your project grows this admin work becomes larger and larger until it's no longer maintainable.
14
+
- I reached out to Don McCurdy who has been working on gltf transform to provide command-line tools to modify and process gltf files. We created a workflow
# Partner Spotlight: Zade's Contributions to 3DStreet in 2023
11
+
12
+
2023 marks a significant year for 3DStreet, made possible through our [talented community of contributors](https://github.com/3DStreet/3dstreet/graphs/contributors) both volunteer and paid. [Zade Agency](https://zade.agency/) fits in the latter category as a software development team for-hire based in Ukraine. Over the past year Zade emerged as a major boost to our development productivity and I wanted to share how their contributions have helped 3DStreet in a critical time for the organization.
13
+
14
+
<!-- truncate -->
15
+
16
+
### The Challenge for 3DStreet
17
+
To meet our timeline for a [public beta launch of 3DStreet Editor in 2023](https://www.youtube.com/watch?v=WnjtUW4J8uc), we faced several challenges. A primary concern was the gap in React expertise among our existing development team. While we are skilled in various aspects, existing React knowledge was crucial for implementing deep and rapid modifications to [3DStreet Editor](https://github.com/3DStreet/3dstreet-editor) which is a heavily modified version of the [A-Frame inspector](https://github.com/aframevr/aframe-inspector).
18
+
19
+
Additionally, as a [self-funded project](https://www.3dstreet.org/docs/about-3dstreet/3dstreet-llc-entity) we have very real budgetary constraints making it imperative to optimize every resource.
20
+
21
+
### Zade's Solution to Boost React Development
22
+
23
+
We found Zade through a direct personal referral via our designer [Daria Dombrovska](https://www.linkedin.com/in/daria-dombrovska-933902207/). Zade immediately brought a wealth of React knowledge through their team of both senior and junior engineers, filling the crucial skill gap in our team.
24
+
25
+
As a self-trained software developer myself, I worked directly with a senior engineer at the beginning to confirm our architectural approaches and details of our tech stack. I also worked with our account manager to agree on the use of [GitHub Projects, issues, and PRs](https://github.com/orgs/3DStreet/projects/5) to manage our working relationship.
26
+
27
+
For day-to-day tasks I create [GitHub issues](https://github.com/3DStreet/3dstreet-editor/issues/) that are prioritized in [Projects](https://github.com/orgs/3DStreet/projects/5) and tackled via a junior engineer who is mentored by the experienced staff. Even as a junior engineer, they have way more experience in React fundamentals than I do given my [rather myopic focus on A-Frame and three.js development](https://twitter.com/search?q=%22aframevr%22%20(from%3Akfarr)&f=live) over the past decade.
28
+
29
+
### 2023 Highlight: Launching 3DStreet Cloud
30
+
31
+
One of the most notable achievements in 2023 was the [launch of 3DStreet Cloud](https://www.youtube.com/watch?v=WnjtUW4J8uc), a React application using [Firebase Firestore](https://firebase.google.com/docs/firestore) on [Google Cloud Platform](https://cloud.google.com/).
32
+
33
+
3DStreet Cloud is the foundation of the growth engine of the [3DStreet Editor product](https://3dstreet.app/) -- it is the system that allows our users to collaborate on safe street designs and fulfill our core mission.
34
+
35
+
### Zade: Empowering Startups with React Expertise
36
+
37
+
Now it's time for the pitch, because the Zade team deserves it!
38
+
39
+
Are you an early-stage startup founder needing flexible React development solutions? Zade specializes in helping launch new startups and accelerating growth for existing ones. Their unique ecosystem is tailor-made for product development in the startup world.
40
+
41
+
**Zade's Offerings:**
42
+
-[**LaunchKit:**](https://zade.agency/launchkit/) A program designed to bring your vision to life within a month.
43
+
-**Integrated Team:** Seamlessly scale your startup with Zade's integrated design and development team.
44
+
45
+
**Special Offer for 3DStreet Community:**
46
+
While there's no such thing as a free lunch in contract development, Zade extends a special offer to the 3DStreet community. Mention 3DStreet to receive a 15% discount on your first month with Zade – a deal that might just be more valuable than a few gourmet lunches, depending on your project's scale.
47
+
48
+
### Connect with Zade
49
+
Interested in learning more? Reach out to Zade at ivan@zade.agency, or contact me directly for an introduction. Let's embark on a journey of innovation and growth together with Zade's expert team!
Greetings! I'm Mark Schlossberg, and I've been working alongside Danny Pimentel at the University of Oregon on an exciting project: crafting augmented reality (AR) landscapes for our streets. What I have here is a practical, step-by-step guide designed to walk you through how to bring this innovative vision to your own neighborhood. So, let's roll up our sleeves and get our hands digitally dirty!
11
+
12
+
<!-- truncate -->
13
+
## Getting Started: Measuring and Designing
14
+
15
+
**First things first—measure up!**
16
+
17
+
To kick things off, you need to know how wide your street is. This is more straightforward than it sounds: just pop over to Google Street View or use an aerial photo, and get an approximate measurement. It's okay if it's not pinpoint accurate—we just need a ballpark figure.
18
+
19
+
**Crafting Your Street: Easy as Pie with StreetMix**
20
+
21
+
Once you've got your measurements, it's time to jump onto StreetMix—a free, user-friendly online tool that lets you reimagine that street space to your heart's content. Want to add bike lanes, benches, or green spaces? Simply drag and drop the elements you want to include, adjusting the widths to fit your street’s dimensions. Here’s where your creativity shines!
22
+
23
+
Illustrate an example of a street being modified in StreetMix
24
+
25
+
For my project, I took a standard residential street and turned it into a car-free park, a delightful haven for community gatherings. Imagine that—but on your block!
26
+
27
+
## Viewing Your Creation: 3D Street's Magic
28
+
29
+
With your design all set in StreetMix, it's time to give it a touch of 3D flair. 3D Street is a fantastic plugin that lets you visualize your newly designed street in all its three-dimensional glory. Explore your virtual environment, tweak and tune each element until you’re satisfied. It's a mini-adventure in urban planning from the comfort of your screen!
30
+
31
+
**Trimming the Excess for AR**
32
+
33
+
To prep for AR, you'll want to peel away the layers that aren’t needed—like buildings, to keep things neat. After simplifying, you can then export your model directly into a format that's ready for the world of augmented reality.
34
+
35
+
## Optional Tweaks: A Blender Bonus
36
+
37
+
For the enthusiasts out there who relish fine-tuning, the free software Blender is your playground. Here, you can manipulate your 3D model to perfection. However, remember this is purely optional—the process is meant to be quick and streamlined.
38
+
39
+
## Bringing It to Life: Augmented Reality Integration
40
+
41
+
Alright, now to the magical part—transferring your 3D model to an augmented reality software. I personally use Adobe Aero, thanks to the site license at the university, but there are other AR apps you can explore. This step allows you to add animations and make your scene come alive, although again, this step is not necessary for the "quick and dirty" path.
42
+
43
+
Show a graphic depicting the transition from the 3D model to the AR scene
44
+
45
+
**Geolocation: Pinning It to the Real World**
46
+
47
+
What’s truly remarkable with software like Adobe Aero is the ability to anchor your AR scene to a precise location on Earth. While this grounds your creation to a specific spot, it's not mandatory; you can always opt to apply your scene freely to any street you wish.
48
+
49
+
## Sharing Your Vision: Universal Access
50
+
51
+
Once your AR scene is polished and ready, you create a shareable link through Adobe Aero. Anyone with this link can open it on their mobile device, head to the designated street, and behold—your digital transformation materializes before their eyes.
52
+
53
+
```
54
+
Blockquote:"Your street is transformed into your scene that you can actually walk through and see what it would look like on your street, and you can go forward, backward, see all the different things that you've done, and really start to reimagine, well, what would this street look like if it wasn't a street as has been, but is actually a park, a place for people in this particular example?"
55
+
```
56
+
57
+
> "Your street is transformed into your scene that you can actually walk through and see what it would look like on your street, and you can go forward, backward, see all the different things that you've done, and really start to reimagine, well, what would this street look like if it wasn't a street as has been, but is actually a park, a place for people in this particular example?"
58
+
59
+
To illustrate, envision wandering through the park that was once just a plain street—all through the magic of AR. Moving forward or backward, the entire scene is interactive and truly a game-changer for community engagement and urban design.
60
+
61
+
## Wrapping It Up
62
+
63
+
And there you have it—a dynamic overview of transforming streets with AR using some clever tools and a pinch of imagination. Not so intimidating now, right? With mostly free resources and a little bit of time, you can be on your way to designing, exploring, and sharing augmented realities that could pave the way for how we perceive and utilize our shared spaces.
64
+
65
+
Until next time, happy designing and thanks for joining me on this digital adventure. Bye for now!
0 commit comments