Above The objects are interactive and it’s possible to open a secret doorAbove The screens follow the user’s cursor. They’re always ‘facing’ the mouse cursorHow we built
scenes. This site had hundreds of
layers, so optimising the rendering was
definitely the biggest challenge. This
came in two phases.
First, we had to optimise the images
themselves for both file size and GPU
memory. For this, we used a file format
called KTX, which enables us to ship
lightweight textures that are easier on
the GPU than standard formats such as
JPEG or PNG.
Second, we had to optimise rendering
performance in order to maintain a
smooth frame rate. We developed the
site using our in-house 3D engine, which
helps us to effectively manage tasks
such as loading assets efficiently and
rendering graphics and effects with the
lowest overhead possible.
We particularly love the way the gallery
is animated in the Fan Art section.
Could you tell us a little about how you
created that?
MA: We use a feature called depth
textures in WebGL, which lets us know
how far away a pixel is from the camera
- in turn letting us compare the depth
of the fan art image from the portal
itself. If the pixel is behind, we apply a
warp shader, which gives the illusion of
a force field.
How easy have you made it for Adult
Swim to update the site and a add in
new content?
MA: It’s very simple for Adult Swim
to manage this site. We have a custom
CMS that’s simple to use and is built for
experiences just like this, which enables
Adult Swim to edit copy, add new content
and even approve fan art submissions
from users.
How do you go about testing a site such
as this?
MA: We have an array of test devices
built up from over the years: fast
computers, slow old laptops, new phones
and low-end Android phones from years
ago. We work with a third-party team to
test the functionality of the site and then
we use our devices to make sure that
the performance will be super-smooth
across the board.
Coming up with the Easter eggs must
have been the most fun part but how
much work were they to implement?
RD: It wasn’t easy to pick environments
because there were so many options! So
we had to go through all the worlds and
backgrounds, then choose based on the
potential to create depth using the 2.5D
technique we used.
Once we had the environment we
wanted to use, we cut out the elements
in Photoshop, separating and isolating
them in layers. Then we used our
browser-based tool to import and give
them depth.What did you learn from this project
that you’ll use on future site builds?
MA: We had so many textures to
compress, so we built a button into
our GUI, which enables designers to
compress them at the click of a button,
instead of dragging them into an
external app.What kind of feedback have you had?
MA: It’s been great to see the reaction
of both fans of the show and fans of web
design. The site has been discussed,
poked and dissected on forums such as
Reddit by both communities.