Loading ...

Responses by Daima Kawamura, producer, DLX; Nobuaki Arikata, technical director and developer, kirifuda; Kenshiro Nakashima, developer and programmer, kirifuda; Erika Otsuka, CG designer, kirifuda; and Tomohiro Ueno, web designer, kirifuda.

Background: This site was created by Dentsu’s internal research team in order to construct something new with its theme of “craft.”

Design: This is an all-new digital experience created with WebGL that moves and changes 3-D text through morphing. The most notable aspect of this website is that characters created with 3-D software are voxelized programmatically and they transition through seamless animation.

Challenges: The most challenging task was to voxel the designed characters and seamlessly animate them. It is very difficult with WebGL to animate voxelized characters while maintaining the cube shapes of the polygon. These processes have given us fairly deep know-how of linking 3-D computer graphics software with WebGL.

Navigation structure: This site has an unusual navigation system, by way of 3-D objects composed of voxels. The logo that appears in the center can be operated by clicking or dragging with the mouse and is transformed into various shapes depending on the position of the screen you are touching. After transformation, it forms the title of each content. By holding the screen, the logo transitions to the screen of that content.

There are two more navigation flows on this website. The first is a transition to sequentially move from one content to the next content. The second is a transition to jump between contents by menu.

Technology: We used Blender to create this website. And the 3-D model has succeeded in reducing the data capacity by compressing it in a GLTF2.0 format. GLSL shader programs enable each model to seamlessly morph. And on every page, graphical representation using WebGL and a seamless page movement system are built with pure JavaScript.

craftprlaboratory.com

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In