PROJECTS
three.js
THREE.JS
planes or spheres, simulating virtually any type of
effect you might need.
You can layer video on top of another material
to create effects that look as though animations
are under glass. You could fill an aquarium with
fish, have beautiful animated skies or detailed
backgrounds. And with the new playsinline option for
video elements, this will work on mobile devices too!WEBGL 3D FOR THE WEB
WebGL is a graphics language designed for the web. It
is a subset of OpenGL but optimised for the needs and
limitations of the browser. It can create amazing 3D
scenes combining models, lighting, geometry, GLSL
shaders and interactivity all inside an HTML <canvas>
element. WebGL is also a web-standard. So, whether
your goal is mobile or desktop, it will get it done.ADD VIDEO TEXTURES
TO 3 D OBJECTS
Richard Mattka shows you how to use video as textures for your 3D
objects, create 360-degree video and apply d#ydulhw|#ri#hļhfwv
In this article we’ll be looking at how you can
add video textures to your 3D scenes. You do
this by loading them as a special texture class and
applying them to various 3D meshes. The ability to
update the texture of each animation frame enables
your video to play seamlessly.
Using a 3D plane, you can easily create a movie
theatre scene, a video playing on a television
screen or detailed information panels for a sci-fi 3D
interface. You can modify the geometry of a plane
to curve it, giving it a unique look like the inside of
a helmet, reminiscent of an Iron-Man-style HUD.
We’ll do this in the tutorial just ahead!
Another great use for video is the ability to pre-
render animations in tools like Cinema 4D or After
Effects and then easily integrate them into your
scene. Complex animations could play on variousABOUT THE AUTHOR
RICHARD MATTKA
w: richardmattka.com
t: @synergyseeker
job: Creative director,
designer, developer
areas of expertise:
Shaders, VFX, WebGL