How to build a mountain in your spare time

Felix Palmer | @pheeelicks | www.pheelicks.com

Slides: felixpalmer.github.io/piste.io-talk

Who am I?

Goals

Online learning
Technical writing
Speaking at conferences
Meaningful side project

Project : piste.io

Piste (noun). A ski trail.

Overview

Bit of history
Coming up with new ideas
Technical issues with the web platform
Getting unstuck
Building the product

A bit of history

Coming up with new ideas

Innovating by elimination

As an individual, lack resources to compete against incumbents
Look at what is being done and avoid duplicating it
Embrace restrictions
Better to do something innovative, but possibly useless, than something useful, but already done
Play to own strengths

Technical issues

JavaScript is pretty slow

JavaScript just too slow for processing huge data
GPU will render anyway, so why not process there too?
No longer thinking in JSON, but textures

Modifying geometry on the GPU

vec3 p = position;
vec2 textureCoord = positionToTexture( position );
p.z = texture2D( uElevation, textureCoord );
gl_Position = projectionMatrix * viewMatrix *
vec4( p, 1.0 );

Push as much onto GPU

General approach: push as much as possible onto GPU
CPU speeds pretty much stalled, GPUs improving all the time
Bet on a future where the GPU is your most powerful processor

There's no debugger on the GPU!

State of WebGL tooling poor, relative to JavaScript
Development really painful, typo takes 10 seconds to surface
Solution: command line tool for validating GLSL

https://github.com/felixpalmer/glsl-validator

Getting unstuck

OSS & blogging

Great way to focus on a specific problem
Forces you to write it well!
Feedback useful to improve code/design
Motivation, when working on a unreleased project
Great way to meet people in the field

LOD terrain

Building a product

3D piste map

Dramatic terrain, 3D really shines
Alpine landscapes reasonably simple
"Just" snow and rock

Experimentation

Engine too complex to tweak in code
No longer just a programming problem
Expose parameters using DAT GUI

Transitioning to a product

Adding pistes
Simplify camera controls
Build chrome around engine (React.js)

Scaling

All work done on client, entire site is just static files
Automate all data processing, do not want to do manual data entry!
Scalabilty more or less comes for free, just need to host on scalable platform, e.g. S3
Leverage cloud for computation

Launching

Many, many bugs!
Device/OS/browser specific quirks
Terrible load time
UX issues (3D is hard)
Bit by bit, fix and improve

Takeaways

Start with something you find interesting and manageable
If stuck for ideas, try to expand/constrain scope
Break out difficult problems and blog about them
Make sure you have the tools you need. Otherwise, build them
Don't be afraid to do something new, even if value is unclear

Thanks

Felix Palmer | @pheeelicks | www.pheelicks.com

Slides: felixpalmer.github.io/piste.io-talk

Tools

Frontend

THREE.js, JavaScript, Require.js, WebGL, DAT GUI, React.js

Data processing

Python, QGIS, GDAL

Backend

what backend?