Giter Club home page Giter Club logo

aframe-city-builder's Introduction

🏗️ aframe-city-builder

A-Frame project demonstrating touch controls for building a VR city scene.

Build a New City Now: >> aframe.city <<

HTC Vive or Oculus Rift with accompanying controllers required to add items to scene.

Load Existing City

Screenshots

* https://raw.githubusercontent.com/kfarr/aframe-city-builder/master/assets/images/screenshot1.png * https://raw.githubusercontent.com/kfarr/aframe-city-builder/master/assets/images/screenshot2.png * https://raw.githubusercontent.com/kfarr/aframe-city-builder/master/assets/images/screenshot3.png * https://raw.githubusercontent.com/kfarr/aframe-city-builder/master/assets/images/screenshot4.png

Feature Highlights

  • Place voxel objects in a fun virtual city of your creation
  • Navigate available voxel objects with a scrolling menu interface in VR
  • Place base plates for streets, grass, parks and residential lots that snap to a simple grid layout
  • Save and load your city to/from JSON format
  • Support for Oculus Touch and HTC Vive Controllers (VR headset and controllers required)
  • Convenience utilities in /utils for creating new object JSON groups for aspiring city voxel artists

Changelog

How do I add new objects to City Builder?

City Builder is only as cool as the objects you can place! So let's add more! (Some day I'd love to have a sketchfab-like fancy cloud interface for uploading objects, an in-app voxel editor and more, but for now you'll have to do a bunch of manual work.)

Step-By-Step Guide

(1) Make the object - I suggest using MagicaVoxel: https://ephtracy.github.io/

(2) Come up with a filename - Each object has unique filename according to this suggested naming convention: "creator_group_object". For example "kfarr_bases_valencia" or "mmmm_obj_candle".

(3) Export to OBJ and take preview image For each object, there are multiple files using the same filename but with different extensions to represent their function in the application:

  • .jpg - A preview image used to represent the object in a menu interface, stored here: /assets/preview/. Should be 1:1 aspect ratio, suggested 256 x 256 dimensions. (Required)
  • .obj, .mtl, .png - Object file format used when placing into A-Frame scene, stored as three files per model here: /assets/obj/ (Required)
  • .vox - The object's raw source file that can be edited again in the future, stored here: /assets/vox/ (Optional)

(4) Add to JSON File - To enable placement of the object within the City Builder app, the object needs to be included in a "creator_group" JSON file. Here's an example: /assets/mmmm_veh.json

To make it easier to add a large number of objects at once, there is a utility script to create a new "creator_group" JSON file here: /utils/json_builder.js

(5) Load JSON file from City Builder - You must add the newly created JSON "creator_group" file to the list of included model definitions upon load of City Builder app. Add your filename to this list: https://github.com/kfarr/aframe-city-builder/blob/master/lib/builder-controls.js#L57

(5) Test it out! Take a screenshot while you're testing! Submit a pull request and include a note and your fancy screenshot!

Need inspiration? What are some other objects to make?

  • more cool vehicles
  • flying things
  • more "bases" like intersection, left turn, right turn, green park only, pedestrian and bike path only
  • more advanced light poles, signals, signs
  • people
  • trains

How can I contribute to City Builder?

Fork this repo, start making changes, and submit a pull request! Also feel free to file an issue or reach out directly [email protected] with your idea and I can try to help make your idea work.

Need inspiration? Here is a partial wishlist for City Builder features:

NOT IN THIS RELEASE - LATER THINGS TO DO:

  • remove old UI2D, add same icons as action menu bar! old dialog pops open #9
  • updating hash should trigger loading new city #10
  • show HUD message for save success with city name - in VR and on browser desktop #11
  • scale large/small (and rotate?) with both grips being pressed (what would happen to undo?) #6
  • remove load and save functions from index html file, can add to action-controls or new component #12
  • add aframe.city to chrome/daydream vr whitelist #13
  • erase tool #14
  • placing an object directly over another (especially for snapping baseplates) should replace the existing object, not place both on same location
  • create a nice "screensaver" or "viewer" mode to entice people to enter VR. For example: show a list of cities and/or show a city at the start by default
  • try adding basic avatar presence using something like: https://github.com/haydenjameslee/networked-aframe
  • auto save with visual indicator (this might be required for multi-user collaboration - i want to see what they've added immediately)
  • try inverted teleport from forked repo
  • add sunlight day cycle as aframe component http://jeromeetienne.github.io/threex.daynight/examples/basic.html; try adding shadow to this too
  • error handling when city in hash cannot be loaded from firebase
  • inspect (magnifying glass)
  • show stats in addition to city name - size of city (objects, area), population (number of chr objects)
  • load directly from voxel https://gist.github.com/JoshGalvin/398ad2339ad7ae93e72489684d599466 https://github.com/daishihmr/vox.js
  • ability for select bar component to delay loading / init - fetch first set of optgroup options from database instead of in index.html
  • blender baking of AO texture and progressive application of AO textures after scene fully loaded
  • support for google draco object compression
  • add a small haptic feedback see: https://github.com/imgntn/jBow/blob/ab2d254f288c563f33e6ed745e41a72ee2b7f759/components/bow-and-arrow.js#L163
  • create components from the useful a-frame stuff (menu switcher, save/load json, desktop dialog ui, message notification)
  • sound effects - commodore 64 style?
  • aframe city website - have a central registry of objects (json file is fine to start) that is not in index.html file ui inspiration - https://buffy.run/model/578e438962c6c80000ea4c5e -> this could be done without a server -> use a git based site builder service. register this as aframe.city
  • try progressive enhancement to replace obj with baked ply after loading
  • load new scenes without destroying original (load by appending) - does not handle collision case
  • add some clouds
  • send a VR postcard to facebook / social media
  • integrate with http://streetmix.net/ to generate street blocks
  • auth / storage service
  • highlight currently overlapping grid location
  • cars to follow prescribed course on roads
  • add aframe snowplay type support https://github.com/rondagdag/aframe-snow-play
  • persistent multiuser world
  • use geolocation api to with virtual citybuilder locations to create "mini second life"
  • physics
  • try isometric view on mobile / non-vr devices (examples aframevr/aframe#84 and http://wafi.iit.cnr.it/webvis/lab/preview.php?gist_id=07b5887a1d57b40b6065)
  • add non-flat lowpoly terrain like this example https://playcanvas.com/

Credits

License

aframe-city-builder's People

Contributors

dmarcos avatar kfarr avatar micahstubbs avatar ngokevin avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

aframe-city-builder's Issues

the new 'erase' feature screws up placing new objects

when working with a scene that has some objects deleted, new objects that are placed sometimes spawn an unexpected object. when saving these cities, they don't reload as expected.

i think this is due to the mechanism of assigning an ID to newly placed objects:
https://github.com/kfarr/aframe-city-builder/blob/master/lib/builder-controls.js#L185

as newly placed objects are given an id of 'object' + document.getElementById('city').childElementCount;, if a scene has deleted items then newly created items might have the same ID as an object already on the scene, resulting in this odd behavior.

a fix would be to generate a near-random UUID for each newly created object. this will break the rudimentary undo feature which needs an overhaul anyway.

Collect anonymous analytics to guide UI improvements

I'm curious how people are using City Builder. It's been featured as an example project on aframe.io but I'm not clear how many people are actually making cities. Looking at some of them via firebase I see a lot of the cities are gibberish or identical copies of others. (A separate ticket is here for browsing existing cities: #18).

I'd like to track a "funnel" of how users are actually interacting with city builder. Some questions I'd like to answer:

  • How many people ( what %) are using webvr compatible devices? Accessing via mobile?
  • How many people actually click "enter vr" button?
  • How many people place at least 1 object? Save or Save As a city?

Using this data, I'd like to be able to improve the UI with the primary goal of encouraging as many people as possible to create or modify a city (save or saveAs with unique city contents).

I've used a couple different web analytics suites before and I really like the funnel view provided by amplitude, but others like keen.io or mixpanel would work too.

Amplitude's javascript sdk is very simple, for example:
amplitude.getInstance().logEvent('EVENT_NAME_HERE');

Some key events to instrument, prioritized from highest:

  • "Enter VR"
  • "Place Object", properties 'file', 'position', 'rotation', 'scale', 'id'
  • "Save" - property 'name': city name
  • "Save As", - property 'name': city name
  • "Exit VR"

Some questions:

  • Can we identify which VR device is being used (vive, rift, daydream, gearvr, etc?)

add action menu option to resize city or alter height

the current green table appears at knee-height for me. it would be nice for it be at about waist height, for more comfortable interaction. a mechanic like the table-height-adjustment flagpole control in The Castle Will be Mine would be a nice enhancement 😄

upgrade to latest version of aframe

<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>

why?

  • currently 0.7.0, what's the diff? probably high falutin' new cool things
  • broken as threejs library has new format for getting world position

Improve performance for large cities

Cities with ~100+ objects seem to be slow in VR mode in FF nightly / Vive. There can be a noticeable delay when looking around or moving controllers which is nauseating and annoying. Here are some notes on optimization from a-frame slack conversation:

  • enable a-frame stats - done, and noticed a few things. the control-bar component creates a new draw call for each object previewed, but this is not removed. so over time in a scene when objects are browsed this slows down the scene little by little.
  • city builder users obj files. at the moment, each obj uses a separate mtl and png, but after some quick analysis those are usually identical (or very similar) and it's possible to load one mtl and use that same mtl reference for separate obj files. this may result in significant performance improvements and is probably the first place to try.
  • research instancing of identical objects - https://github.com/takahirox/aframe-instancing/
  • using "pool" is probably not going to offer significant performance improvement for this use case per slack conversation

Can only see one Vive controller

I tried rebooting SteamVR several times and still no luck. When I turn on one controller at a time, the first controller will turn on and I can see it. When I turn on the second controller, the first controller will then disappear.

people are overwriting cities with gibberish

good news - people are using this
bad news - people are overwriting other cities with crap

feature request: allow people to "protect" a city with auth

another idea:

  • cities can NEVER be overwritten, only saveAs

Publish to GitHub pages

In settings, go to GitHub pages and set to publish Master branch. For people to easily try out.

item placing broken

item placing doesn’t work, this is caused by new aframe with upgraded threejs with renamed get world position / rotation function, relatively simple fix is possible

add erase action

Similar to tilt brush, it would be nice to be able to delete previously placed objects. Right now the only way to do that is with undo squeezing the grip buttons.

Right now there is an icon on the action menu but it doesn't do anything: https://github.com/kfarr/aframe-city-builder/blob/master/assets/environment/icon_erase.png

It could be very similar to tilt brush: objects touching the erasing object (this could be a glowing red orb or a voxel image of a bulldozer or...) simply disappear.

Allow uploading of objects without adding to repo

@Utopiah asks "City Builder could have access to another library of objects (maybe curated, at least with a specific scale) as an endpoint?"

Right now it is a cumbersome process to add new objects, I included a step-by-step guide on the updated readme here:
https://github.com/kfarr/aframe-city-builder/blob/master/README.md#how-do-i-add-new-objects-to-city-builder

It’s clear that the objects shouldn’t live in the repo in the long term. There's a firebase hosted version of this app at https://aframe.city and it is conceivable objects should be hosted file blobs and I was intending to move in that direction eventually. AND, if you want to be really fancy, there could be a cloud voxel editor for the objects. I’ve seen a few implementations of web based voxel editors, a few are quite fully featured.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.