dotkalm / BootedWebAppFrontend Public

Notifications You must be signed in to change notification settings
Fork 0
Star 0

runs canny edge detection to gather heuristics for car geometry

0 stars 0 forks Branches Tags Activity

Notifications

Name		Name	Last commit message	Last commit date
Latest commit History 102 Commits
__mocks__		__mocks__
__tests__		__tests__
docs		docs
public		public
src		src
.gitignore		.gitignore
README.md		README.md
babel.config.js		babel.config.js
eslint.config.mjs		eslint.config.mjs
jest-raw-loader.js		jest-raw-loader.js
jest.config.ts		jest.config.ts
jest.setup.ts		jest.setup.ts
next.config.ts		next.config.ts
package.json		package.json
tsconfig.json		tsconfig.json
yarn.lock		yarn.lock

Repository files navigation

BOOTED v1

booted demo

At a glance

Front end web app that communicates with an image recognition api to overlay an object onto a photo from device’s camera using threeJS.

Overview

Background	I was living in Santa Monica, CA, and often saw very expensive cars parked on the street, naturally I wanted to boot them.
Concept	Place a `parking enforcement boot` on photos of cars.
Why?	Pranking people
Technical Goal	Overlay 3d asset on 2-d image, scale correctly, rotate correctly, place on correct spot with correct lighting.

Front end requirements

Send image to server
Receive coordinates of car tire bounding box and basic geometric heuristics from backend.
Correctly orient 3d asset, scale, and place accordingly

Known imitations of v1

Always chooses tire on the right of the image
Only basic perspective is created using 1 axis determined by the car's wheels
Lighting is not matched

How I made v1

	Developed With Fixtures using Storybook Created fixtures to mock api response and used storybook to help establish the baseline orientation of the 3d asset
	Establishing Z-Axis I realized that I could approximate the z-axis of the object by drawing a line from the center of each tire and calculating the angle of that line.
	Scaling object and placing on target After orienting the asset on the correct z-axis I then create a 2d image from the 3d context. Once the asset is 2d I scale the circular clamp of the boot according to the size of the tire's ellipse. I then calculate the distance of the car tire from the center of the image and use those coordinates to shift the 2d parking boot onto the target.

What to expect from v2

Leverage homography	Correctly determine the camera's perspective in the original photo Apply the perspective from the original world-view to the camera perspective in threeJs
Apply lighting	Collect lighting heuristics from API Use lighting sources in threeJs to match asset to scene

About

runs canny edge detection to gather heuristics for car geometry

Report repository

Releases

No releases published

Packages

No packages published

Languages