art with code

2016-12-08

Acceleration Project Proposal

Here's another thing I made. I doubt I'll build it, so have at thee.


mblur_oups2.png

ACCELERATION
PROJECT PROPOSAL
7 DEC 2016







ILMARI HEIKKINEN ⸺ hello@fhtr.net
FHTR LTD


Screen Shot 2016-11-16 at 18.24.21.png
Overview
Acceleration is an artist-oriented tool for quickly making good-looking animated 3D websites and VR experiences. Export the created animation timelines for use by developers.
Acceleration plugs a gap in the market between game engines, static scene editors and non-interactive 3D art tools: artist-driven creation of beautiful interactive 3D websites.
Acceleration is a tool for creating daily interactive animated artworks. See these two examples of Cinema4D daily renders (scenes made in a few hours, rendered, posted on Instagram) by Raw & Rendered and Beeple:

14701175_574041902798809_2501218477348487168_n.jpg 14718402_129621827509529_3629888565082587136_n.jpg

Now imagine that you could put interactive versions of those up on the web. Production value of a quickly made website would go way up and make high-end 3D sites - now restricted to agencies and major brands - an option for more companies and individuals.
Tool gap
Currently if you want to build an animated 3D scene, you either have to use a game engine or a lower-level 3D library. Building something that sits between the two extremes would be readily usable for digital agency work.
The marketing and feature sets for game engines are aimed at making games: if you want to make an art piece / 3D site / VR experience, they seem like the wrong tool. They’re difficult to learn, difficult to integrate to web sites, and come with all kinds of junk that you don’t need as an artist. Game engines often require programming to make interactive scenes, which makes graphic artists tune out and go back to making static content. Most stand-alone app interactive agency work is built using one of these engines, usually Unity or Unreal Engine.
Lower-level 3D libraries are even more difficult to learn and really require working with a developer. On the plus side, you get more native integration with web sites. Most agency work 3D websites out there are built using these lower-level libraries, primarily with three.js. The problem with lower-level libraries is the way they move the artist away from solving art problems, and instead put the developer in that position. The result is expensive programmer time wasted on programmers doing substandard art with bad tools, a disillusioned artist who sees their work screwed by the programmer, and a disappointed client.
Non-interactive 3D content tools excel at giving artists easy-to-use ways to build and hone beautiful scenes and animations. Artists are using tools like Cinema4D, After Effects, Maya, Octane and Keyshot to quickly build, layout, light and model scenes that look amazing. But when they try to bring this content over to the web, it’s nearly impossible. Either you export videos or image sequences, and lose the 3D aspect of the work, or you work with a developer to bring the 3D scene into a 3D engine and then spend a large amount of artist time and dev effort to try and match the look of the rendered images. The economics don’t bear out fast exploration: that’s why artists do “dailies” in Cinema4D and Unreal Engine, but not in three.js.
Goals
  1. Tool for artists to make 3D animations to be used by front-end developers
  2. Tool for artists to make and share daily 3D animations
  3. Tool for artists to make and share daily 3D interactive experiences
Specifications
Create WYSIWYG animations using F-curves, easing equations, dope sheet and 3D motion curves. Export the animation as JSON data. Play the animation data with a runtime library.
Making and sharing 3D animations
Save animation data and scene data into a cloud service or export it as a HTML file. Sequencing scenes to make cuts. Simple sharing to social media platforms to increase your reach. Feed algorithm that makes you work harder.
Import assets from industry-standard software. Beat-synchronize animation to music. Material editor with physically based materials. Rendering backends for interactive 3D, offline rendering.
3D websites
Behavior editor to create event listeners and hook them up to handlers. Multiple timelines with tweens between current state and new timeline start. Nested timelines to create re-usable clips that can run independently of the main timeline.
Create links from objects to other scenes and timelines.
Milestones
  1. Initial prototype
A four-view scene editor, featuring a timeline with a single-object dopesheet and f-curves, online at fhtr.net. Showcases technical feasibility and how much a tool like that would help in making smooth professional-looking animations.
Screen Shot 2016-11-16 at 18.24.21.png


  1. Mock-ups and market research
Photoshopped a mockup GUI of the proposed tool by slapping together bits and pieces of Cinema4D, new UI designs, and screenshots of the fhtr.net prototype. Posted the mockup on Twitter to test the waters.
Based on 90 likes and 16 retweets, plus numerous “Yes, please!” replies from front-end devs and agency folks, there seems to be some demand for a tool like this. The actual parameters of the demand are still very fuzzy.

Should I start developing this three.js animation editor? Anyone wanna use it?


@ilmarihei awesome! Yes!
Dani Valldosera, Develop lead & Front end developer at Dimo Visual Creatives - dimo.cat
@ilmarihei Yes! 👏
Joe Branton, Grow Digital Agency - thisisgrow.com
@ilmarihei yes! that’s incredible.
Niall Thompson, Co-founder and head of Web & Interactive - dandelion-burdock.com
@ilmarihei please!
Edan Kwan, Co-founder / Creative Technologist at @wearekuva - kuva.io
@ilmarihei YESYESYES!
Ricardo Cabello, Mr.doob, creator of Three.js - mrdoob.com
@ilmarihei @mrdoob Yes! That looks superb!
Octavector, Web designer / Illustrator - octavector.co.uk
@ilmarihei YES PLS
Vanessa Yuenn, Javascript Developer at Rangle.io Inc. - rangle.io
トキオZBMAN, Developer at a Bangkok digital agency - giant9.com
@ilmarihei omg yes!
Iván Uru, Web Developer and Digital Artist in México - about.me/vheissu
@ilmarihei yes please!
Adam Sauer, Electrical Engineer building telecom systems and a 3D productivity app.
  1. Build a client team
Find motion graphics designer to work part-time as the client on the project, using the tool to build an animated site scenario. That’ll keep the UI honest and useful, and produce marketable example content.
  1. Secure income for the project build
The second prototype build is likely to take a month. Expanding the second prototype to a more production-ready version would take around three months. These figures are based on a single person working alone on everything. To fund the development, I’d need to secure around $15,000 funding for the second prototype and $30,000 for the first production version and demo content.


Post a Comment

Blog Archive

About Me

My photo

Built art installations, web sites, graphics libraries, web browsers, mobile apps, desktop apps, media player themes, many nutty prototypes, much bad code, much bad art.

Have freelanced for Verizon, Google, Mozilla, Warner Bros, Sony Pictures, Yahoo!, Microsoft, Valve Software, TDK Electronics.

Ex-Chrome Developer Relations.