VFX
Special Effects
Page 6
Blurring Scene
Two views of a pretty cartoon like landscape display, one with post processing and one without post processing. The first view's a screen shot from WebGL post processing, which blurs the image as you swipe. The second view's a screen shot with the same texture map and set of texels, yet no post processing.
Learn how post processing was prepared, below.
View the interactive version.
Use the search icon in the navigation bar above,
to find Blur Landscape: Cube Map
.
View animation taken from screen shots.
Use the search icon in the navigation bar above,
to find Environment Blur
.
3D Landscape
Blurring Scene Over Time
3D Landscape
Scene without Blur
Preparation
Blurring Scene
A cartoon like landscape was modeled and mapped in 3ds Max then saved as a set of cube view maps.
With Photoshop the maps were assembled to display inside a cube, as described in the Kindle book, Learn WebGL Book 3: 3D Scenes.
With WebGL the scene renders. Users can swipe to view left, right, up and down within the landscape. As you swipe, post processing adjusts texels causing more and more blur over time.
Without Blur
One image displays the scene without post processed blurring.
With Blur
The other image displays the scene after the fragment shader postprocessing modifies the image.
3D Scenes: Learn WebGL Book 3
explains how to display
background environments with a very simple cube technique.
Learn how to render scenes with the most
basic shaders and one texture map.
This method avoids skyboxes, switching programs, changing textures, and
even leaves room in the environment's texture map
for other mesh elements.
You'll also learn to prepare graphics to work with the code,
for efficient 3D backdrops.
Simple Scenes
The simple scenes, described in this book, use a unique, fast method to display 3D environments with WebGL. Learn how to prepare, load, initialize, and display backgrounds which apply a texture from an image file, to the inside of a cube. View the environment from the center of the cube. The streamlined technique allows code to run well on WebGL enabled mobile devices and Web browsers including Android, iPhone and PCs.
The first scene displays a grid with labeled walls, for help during development. Scenes also include a 3D art gallery, a modified photograph of the Storforsen rapids, and a cheerful 3D rendered island scene surrounded by ocean.
Amazon Kindle
3D Scenes
. Select a Country:
Tags
Visual Effects
Special Effects: Flames, Mist, Haze, Colors
See creative visual effects from fire, smoke and clouds to colored lights and translucent shapes.
Special effects include interactive 3D Web design, 3D animation, morphing art and 2D VFX effects.
Effects prepared with graphics tools including Photoshop, Adobe After Effects and 3ds Max. VFX generated with software languages including JavaScript, CSS3, HTML5, WebGL and GLSL shaders; written with the C language.