Loading ...

Responses by Edu Prats Molner, developer; and Josep Basora, founder and designer, Basora Studio.

Background: The site showcases the portfolio of film production company DVEIN, run by a director with two heads: Teo (Guillem) and Carlos (Pardo). The company works in commercials, music videos and films, and they love experimentation. We started working with Teo and Carlos around the idea that the site would show their process. For them, every project starts as a mess of ideas, like a big mural where they share their thoughts or the wall of a public bathroom stall. And together, with Basora Studio, they came up with the concept of a whiteboard where people can share their thoughts. The site is all about that: people interacting with DVEIN’s work and adding their own on a whiteboard.

Design core: The site is as interface-less as possible; there is only a big text menu with four main options, which remains hidden most of the time, and the mouse cursor acts as the button for everything, cluing users in with actions—click, drag, play, pause, close, etc. The rest is all graphics, drawings, photographs and 3-D objects. The site is built entirely with WebGL, three.js and a bit of CSS in 3-D, although its design has an overall flat, 2.5-D look and feel.

The information presents two levels: DVEIN’s pictures and videos, and secondary playful elements such as user-created content and 3-D interactive objects. All secondary elements remain grayscale unless you interact with them, while the footage stays in color, gaining contrast and being highlighted at all times.

Favorite details: The cursor animations and states are pretty neat. It is all implemented in Canvas 2D using code—no images or SVG animations. DVEIN also required the ability to showcase weird footage and personal experimentation; hence, the “Black Dot,” that flat black hole in the canvas, was born. Users can click on the Black Dot to dive into a conglomerate of footage living at a microscopic level somehow. Once in there, you can drag pictures and videos around.

Challenges: Although it might seem like a lightweight site without many polygons or lights, there is quite a lot going on. The site itself is very texture hungry. Performance was really important, and therefore, all projects showcased run within a single-shader program. Another instance of the same shader was used to create the Black Dot. All images and videos come from a back end, and a texture atlas is created on the fly. When selecting a picture, the 512-by-512-pixel texture area that is used for the thumbnails is replaced by a high-res texture. All UVs and image ratios are encoded in the geometry buffers.

When it comes to video, we had some performance issues with certain GPUs, so we ended up setting a CSS 3-D video element perfectly on top of the WebGL thumbnails to mitigate that.

All main functionalities were developed in about seven weeks of work spread across two or three months. Since there was not much pressure for time—and we loved this project so much—we dedicated plenty of extra time into refining, iterating, fine-tuning and also obtaining a pretty solid and fun to use iPad version. If you make it to the site on a tablet, try drawing something with the pen—it works really well!

Navigation structure: We kept it simple with four pages: “DVEIN,” an about page; “OVERVIEW”; “DRAW”; and “SHOOT.” The rest is all an organic, playful experience where users unfold projects or select footage. We use the HTML5 history API so projects have deep linking, and you can use browser arrows to go back as well.

There are some standard keyboard shortcuts on the site as well: hit the escape key to leave a place or left/right arrows to navigate through project footage. The rest is also pretty minimal, with a mouse cursor constantly hinting at specific actions.

Technology: For the back end, we used Kirby, a lightweight, file-based CMS. We render the CMS’s contents as JSON and as HTML for mobile fallbacks: the site is designed for a fairly big screen, so we keep mobile as an HTML fallback even if powerful enough to run the full site. The front end is built entirely with JavaScript, WebGL/GLSL and CSS on top of Three.js. Also, we used the GSAP library for certain animations.

Anything else? On the site, anyone can leave a message while drawing or writing with a virtual pen, or by uploading a mugshot as a stop-motion GIF animation. All these elements are treated as custom binary files that later inject geometry and texture buffers in WebGL and ThreeJS. Although we want it to remain as that metaphoric toilet stall wall where anyone can leave a message, we have a back-end system for checking user creations. Everything gets automatically published, but in case there is something that could be too offensive, we can decide to remove it. At the same time, we can also save cool creations and feature them anytime.

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