Here's another thing I made. I doubt I'll build it, so have at thee.
7 DEC 2016
ILMARI HEIKKINEN ⸺ email@example.com
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:
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.
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.
- Tool for artists to make 3D animations to be used by front-end developers
- Tool for artists to make and share daily 3D animations
- Tool for artists to make and share daily 3D interactive experiences
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.
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.
- 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.
- 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
Joe Branton, Grow Digital Agency - thisisgrow.com
@ilmarihei yes! that’s incredible.
Niall Thompson, Co-founder and head of Web & Interactive - dandelion-burdock.com
Edan Kwan, Co-founder / Creative Technologist at @wearekuva - kuva.io
Ricardo Cabello, Mr.doob, creator of Three.js - mrdoob.com
Octavector, Web designer / Illustrator - octavector.co.uk
@ilmarihei YES PLS
トキオ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.
- 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.
- 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.