• Stars
    star
    130
  • Rank 277,575 (Top 6 %)
  • Language
    C#
  • License
    MIT License
  • Created over 7 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Invisible Highway is an experiment in controlling physical things in the real world by drawing in AR. Simply make a pathway along the floor on your phone and the robot car will follow that path on the actual floor in your room. A custom highway with scenery is generated along the path to make the robots a little more scenic on your phone screen.

Invisible Highway

image

Remember how fun remote control cars were to play with as a child? Well, what if you could control where the car goes by drawing invisible highways in your living room? What if you could watch as an imaginative and fun scene is dynamically generated around your car as it drives through the roads youโ€™re creating.

This playful experiment examines just how AR can be used to intuitively control physical objects.

Originally prototyped by Anna Fustรฉ and Judith Amores from the MIT Media Lab, the two researchers who worked with Google Creative Lab over the summer to experiment with AR and developing new and meaningful interaction models with our environment. Google then brought on global design and experience studio Jam3, to design and build out the concept, and add dynamic functionality that would seamlessly meld the physical and digital worlds.

Google Blocks was used for initial modelling. The car was built using an off the shelf model from Adafruit with DIY additions. The app is built in Unity and communicates with the robot via Bluetooth.

You can read about this and other AR Experiments here.

Hardware

Bill of Materials

To create the robot you will need the following:

  • 1x robot
  • 1x IMU
  • 2x encoders for the motors
  • A cover for the robot. Print it on A4 without scaling to fit, cut and assemble it so that it looks like this and paint with a color which is not found in the environment you will be using the robot, so that the Chroma Key shader can pick it up

Setting up the Robot

  • Download VS Code
  • Install the PlatformIO extension
  • Open the "Robot-Firmware" folder in VS Code
  • Connect the robot via USB
  • Press the upload button in the bottom left of VS Code

PlatformIO should automatically install the dependencies. if you get build errors due to missing libraries:

  • Open the file platformio.ini
  • Click the terminal icon on the bottom bar of vs code
  • For each number in the lib_deps (?) section of the ini, run in the terminal: pio install # where # is the number from lib_deps

Using the Adafruit Bluefruit LE Connect app, connect to the robot and issue a few commands to make sure everything is working as expected.

Software

Installation

To install the app on an ARCore-compatible device do the following:

  • Install all the ARCore pre-requisites on the device (for instance the ARCore service)
  • Pull this repository and using a version of Unity 2017.1 beta9 or later open the InvisibleHighway.unity scene
  • You will need to import the ARCore UnityPackage and ensure all the project settings conform to ARCore requirements.
  • You will need to buy and import the Bluetooth LE for iOS, tvOS and Android package
  • Switch your platform to Android in Unity build settings
  • Build and Run for your device.

Usage

  • Make sure your Robot is turned on.
  • Launch the app, preferably in landscape mode.
  • Observe the blue LED on the Robot turn on to indicate that the bluetooth connection with the app is established.
  • Keep the app pointing to the floor and move it slightly around so that it can recognize the floor as the main ground plane.
  • Once the floor is recognized a white reticule will appear on the sceen. Tap anywheer on the screen to add a point to the path that the Robot will follow.
  • Keep tapping to add more points and create a full path. Don't create sharp corners as the road assets were not made for that. When done, press the next button.
  • The wireframe of the Robot's cover has appeared (if you are using a different cover than the one provided you will need to update this mesh in Unity).
  • Align perfectly the wireframe with the physical Robot so that the app can understand your Robot's position and orientation and tap on the screen.
  • If you are happy with the calibration, tap the done button to start the experience!

Known Issues

Android Permissions

The first time you run the app you will be asked for the required permissions (camera and bluetooth). After you accept you might see an error that ARCore failed to connect. Just restart the app to resolve this issue.

We believe this will be resolved in future versions of ARCore as hinted in the documentation.

Additional Credits

We acknowledge and are grateful to these developers for their contributions to open source software. You can find the source code, project links, and license information below.

More Repositories

1

math-as-code

a cheat-sheet for mathematical notation in code form
14,818
star
2

devtool

[OBSOLETE] runs Node.js programs through Chromium DevTools
JavaScript
3,774
star
3

nice-color-palettes

nice colour palettes as JSON
JavaScript
848
star
4

three-bmfont-text

renders BMFont files in ThreeJS with word-wrapping
JavaScript
764
star
5

glsl-fast-gaussian-blur

optimized single-pass blur shaders for GLSL
JavaScript
659
star
6

hihat

๐ŸŽฉ local Node/Browser development with Chrome DevTools
JavaScript
447
star
7

jam3-lesson-webgl-shader-threejs

Using custom vertex and fragment shaders in ThreeJS
JavaScript
361
star
8

jam3-lesson-webgl-shader-intro

A brief introduction to fragment shaders.
307
star
9

web-audio-player

a cross-browser WebAudio player
JavaScript
244
star
10

360-image-viewer

A standalone panorama viewer with WebGL
JavaScript
243
star
11

ae-to-json

will export an After Effects project as a JSON object
JavaScript
225
star
12

msdf-bmfont

Generate BMFont texture and spec using msdfgen
JavaScript
161
star
13

jam3-lesson

142
star
14

audiobuffer-to-wav

convert an AudioBuffer to .wav format
JavaScript
132
star
15

awesome-streetview

beautiful [lat, lng] Google Street View locations
JavaScript
129
star
16

ffmpeg-gif

shell script to convert video to high quality GIF with ffmpeg
JavaScript
124
star
17

jam3-lesson-module-basics

intro to modular programming for frontend JavaScript
113
star
18

orbit-controls

generic controls for orbiting a target in 3D
JavaScript
110
star
19

nextjs-boilerplate

Jam3 NextJS Generator for SPA, SSG, SSR and JAMStack applications
TypeScript
107
star
20

svg-to-image

convert SVG text to a Image that can be drawn in canvas
JavaScript
103
star
21

voice-activity-detection

Voice activity detection
JavaScript
102
star
22

extract-streetview

extract street view spherical images and depth information
JavaScript
101
star
23

react-f1

F1 ui animation library for React
JavaScript
90
star
24

webgl-react-boilerplate

WebGL React App โšก๏ธ
JavaScript
87
star
25

opentype-layout

word wraps and lays out Opentype.js glyphs
JavaScript
86
star
26

chaikin-smooth

Chaikin's smoothing algorithm for 2D polylines
JavaScript
82
star
27

f1

A stateful ui library
JavaScript
78
star
28

touch-scroll-physics

scroll physics for a scroll pane with edge bounce and velocity
JavaScript
77
star
29

preloader

A library for loading common web assets
JavaScript
69
star
30

three-png-stream

streams ThreeJS render target pixel data
JavaScript
66
star
31

layout-bmfont-text

word-wraps and lays out text glyphs
JavaScript
59
star
32

react-background-video-player

React background video component with simple player API
JavaScript
58
star
33

ios-safe-audio-context

create a WebAudio context that works in iOS and everywhere else
JavaScript
57
star
34

perspective-camera

a high-level 3D perspective camera
JavaScript
53
star
35

glsl-hsl2rgb

HSL to RGB color conversion in GLSL
GLSL
50
star
36

touches

simplified touch/mouse events for flick and swipe
JavaScript
45
star
37

ios-video-test

a test of inline iOS video playback
JavaScript
45
star
38

three-path-geometry

thick 2D lines for ThreeJS
JavaScript
42
star
39

jam3-lesson-canvas2d

open source code for a Canvas2D workshop at Jam3
JavaScript
41
star
40

maya-json-export

a generic Maya to JSON exporter for triangle meshes
JavaScript
41
star
41

glsl-100-to-300

transpiles GLSL tokens from v100 to v300 es
JavaScript
39
star
42

xhr-request

tiny http client for Node and the browser
JavaScript
39
star
43

webvr-gearvr-test

a simple test of WebVR running natively in GearVR
JavaScript
38
star
44

generator-jam3

This is a generator for Jam3 projects
JavaScript
37
star
45

google-maps-api

Get up and running with the google maps API quickly
JavaScript
34
star
46

babel-plugin-static-fs

statically transforms Node fs for the browser
JavaScript
33
star
47

ae-to-json-cli

This is a command line application to export After Effects files as JSON
JavaScript
33
star
48

tech-we-use

A list of technologies: modules, libraries, and tools we use
32
star
49

load-bmfont

loads a BMFont file in Node and the browser
JavaScript
31
star
50

jam3-testing-tools

a brief intro to testing tools
30
star
51

gl-pixel-stream

streaming gl.readPixels from an FBO
JavaScript
30
star
52

jam3-lesson-module-creation

introduction to creating a new npm module
29
star
53

threejs-generate-gif

Generate an animated GIF (using the GPU) from a threejs scene
JavaScript
29
star
54

tap-dev-tool

prettifies TAP in the browser's console
JavaScript
29
star
55

text-split

Utility for splitting text into chunks based on regex.
JavaScript
27
star
56

three-simplicial-complex

render simplicial complexes with ThreeJS
JavaScript
27
star
57

three-buffer-vertex-data

an easy way to set vertex data on a BufferGeometry
JavaScript
27
star
58

parse-dds

parses the headers of a DDS texture file
JavaScript
26
star
59

threejs-post-process-example

a tutorial on ThreeJS post processing
JavaScript
24
star
60

add-px-to-style

Will add px to the end of style values which are Numbers
JavaScript
24
star
61

google-panorama-by-location

gets a Google StreetView by [ lat, lng ]
JavaScript
24
star
62

mesh-heightmap-contours

Given a heightmap, generate a "contoured" terrain mesh
JavaScript
24
star
63

detect-import-require

list require and import paths from a JavaScript source
JavaScript
24
star
64

says

cross-platform 'say' command using Electron
JavaScript
23
star
65

background-cover

Simulate 'background-size: cover' on HTMLVideoElement and HTMLImageElement
JavaScript
23
star
66

analyser-frequency-average

gets an average intensity between two frequency ranges
JavaScript
23
star
67

webgl-components

Modular components and utilities used for WebGL based projects ๐Ÿ’…
TypeScript
22
star
68

video-element

A simple HTML5/YouTube Video Element with a unified interface
JavaScript
22
star
69

three-fluid-demo

ThreeJS fluid simulation demo
GLSL
22
star
70

delaunify

randomly delaunay-triangulates an image
JavaScript
22
star
71

camera-unproject

unproject 2D point to 3D coordinate
JavaScript
21
star
72

heightmap-contours

Generate a series of 2D contour meshes over a heightmap
JavaScript
21
star
73

glsl-blend-overlay

blend mode 'overlay' for GLSL
C
20
star
74

ray-3d

a high-level ray picking helper for 3D intersection
JavaScript
19
star
75

scroll-manager

A handler for scrolling inside elements with different eases
JavaScript
19
star
76

touch-pinch

minimal two-finger pinch gesture detection
JavaScript
19
star
77

three-orbit-viewer

quick harness for viewing a mesh with orbit viewer
JavaScript
18
star
78

css-transform-to-mat4

Will take a string which is a css transform value (2d or 3d) and return a mat4 or 3d transformation matrix from the string.
JavaScript
17
star
79

gl-shader-output

test a shader's gl_FragColor output on a 1x1 canvas
JavaScript
17
star
80

gh-api-stream

streams JSON content from a GitHub API
JavaScript
17
star
81

uploadr

CLI tool which uploads a folder via SFTP
JavaScript
17
star
82

camera-spin

Mouse/touch-draggable first-person camera
JavaScript
17
star
83

exif-orientation-image

Properly displays an image via canvas based on the exif orientation data.
JavaScript
16
star
84

jam3-lessons-react

Quick and brief reference for React development
15
star
85

preview-dds

preview and save DDS textures from the command line
JavaScript
15
star
86

meetup-creative-coding-webgl

A WebGL experiment created for Jam3's Creative Coding Meetup on October 23rd 2019.
JavaScript
14
star
87

detect-audio-autoplay

detects whether the browser can auto-play audio
JavaScript
14
star
88

ae-threejs-multichannel-sdf

A signed distance field Effect plugin for Adobe After Effects
C
13
star
89

slot-machine-button

๐ŸŽฐ React Slot Machine Button
JavaScript
13
star
90

google-maps-image-api-url

This module will return a string which is a url to load an image from the Google Maps Image API
JavaScript
13
star
91

webgl-to-canvas2d

Convert a webgl context or webgl canvas into a 2d canvas
JavaScript
13
star
92

f1-dom

Create f1 ui with the dom
JavaScript
12
star
93

nyg

Not another yeoman generator, a simplified project generator based around prompts and events.
JavaScript
12
star
94

camera-picking-ray

creates a picking ray for a 2D/3D camera
JavaScript
11
star
95

scroll-bar-width

Detect browser scrollbar size
JavaScript
11
star
96

nyg-jam3

Second generation of the Jam3 Generator, many new features and breaking change features
JavaScript
11
star
97

awwwards-stream

scrape Awwwards data
JavaScript
11
star
98

adviser

Jam3 quality advisor. Integrates checking for best practices at Jam3
JavaScript
11
star
99

google-assistant-21-days-of-gratitude

JavaScript
11
star
100

google-assistant-greeting-cards

JavaScript
10
star