TagJavascript

WebGL Compositing: Camera Match-Moving

Let’s go straight to the point: here is a post about the use of WebGL for camera tracking. Usually the compositing is made with a software (After Effects, Motion, Nuke…) and rendered as a single movie file. Instead I’m gonna use Seriously.js by Brian Chirls. It’s a real-time node-based compositor built with JS and WebGL. It means you can:

  • blend and synchronize movies with dynamic data (other movies, pictures, 3D scenes…)
  • turn the compositing interactive, so driven by user behavior

Continue reading

Introducing Cardboard-kit

Long time with no post…

In early October I was working on some camera tracking for experiments around Seriously.js and Three.js. My post about that stuff was in progress and then my good friend Rémi offered me to help him for his new project. I was pretty excited and agreed to contribute to it.

A new side project

So we’ve made Cardboard-Kit in 3 weeks. Cardboard-Kit is a small company manufacturing and selling DIY VR headsets, Continue reading

After Effects to CSS 3D workflow – Part 3 – Finalisation

Welcome to the third and last part of the article about the After Effect / CSS 3D Transform transitions workflow : After Effects to CSS 3D workflow – Part 3 – Finalisation.
Click here to see the main page of the article : http://www.turbodrive.tv/blog/css-3d-transitions-workflow-using-after-effects/

Part 3: JS finalisation and enhancements

Javascript

JSON Loading

Let’s start with the JSON file, generated by the JSX script in After Effects. The JSON object contains 2 arrays : targets and sprites3d. All of them store objects defining names, positions and rotations of the 3D elements in the scene.
Get back the main.js file seen in the first part and modify some code. It should have the scene creation, targets and controls only when the JSON file is completely loaded and parsed.

Continue reading

After Effects to CSS 3D workflow – Part 2 – Transposition

Welcome to the second part of the article about the After Effect / CSS 3D Transform transitions workflow : After Effects to CSS 3D workflow – Part 2 – Transposition.
Click here to see the main page of the article : http://www.turbodrive.tv/blog/css-3d-transitions-workflow-using-after-effects/

Part 2: After Effects transposition and JSON export

You should have the naming convention and the 3D scene structure in mind before continuing (otherwise, take a look at the first part).
This part will be dedicated to AE and coding JSX expressions and script (actually it’s Javascript).

3D Scene

Let’s create the CSS 3D Scene into After Effects : same containers and basic hierarchy to start.
I nest 3 compositions :

- stage composition
  └ interactiveContainer composition
    └ targetsContainer composition

For each composition size, I’ve chosen HDV 1280×720. I usually create my designs at this size. There are a several benefits :

  • it’s a 16:9 standard;
  • easy for adaptations (always think about multiple browser window sizes and ratios);
  • wide enough for a good resolution but not to much for working.

Continue reading

After Effects to CSS 3D workflow – Part 1 – Introduction

Welcome to the first part of the article about the After Effect / CSS 3D Transform transitions workflow : After Effects to CSS 3D workflow – Part 1 – Introduction.
Click here to see the main page of the article : http://www.turbodrive.tv/blog/css-3d-transitions-workflow-using-after-effects/

Part 1: Introduction and CSS

Pre-requisites

You need some (at least basic) knowledge to follow and apply comfortably explanations :

  • CSS 3 / Javascript
  • Adobe After Effects: UI, expressions and scripting
  • Tweening principle
  • Real-time 3D principle

I try to give details on tricky parts but don’t come back on basics. It already exists a lot a ressources about these topics on the internet. Take a look at the about page to get links for learning general stuffs like these. Despite that, if you need extra clarification or feel it should have few on some points of the article, drop a line in the comments!

Background

I’ve made the first version of this workflow when I thought about the adaptation of my Flash personal website Turbodrive in HTML5. The main ideas were :

  • have something close to the Flash version for the 3D transitions
  • take the occasion of the HTML5 to make the website mobile-compatible and take advantage of the touch screens to improve the user experience.

Scene used as example for the AE to CSS workflow

Compared to Turbodrive, I introduce here a simplified scene for the purpose of the example. In following the explanations you’ll be able to recreate this scene, and so, learn the workflow principles to make it your own.

Continue reading

© 2018 Turbodrive Blog

Custom theme based on Wilson by Anders NorenUp ↑