North Kingdom

Part 1 — Process
Part 2 — Exploration
Part 3 — Team

—

We gathered some of the team members involved in this project and asked them about their thoughts and reflections about WebGL among other things.

— KLAS KROON, DEVELOPER

Can you shortly say something about your background?
Have been doing flash-development for over 10 years, working for NK since 2004. Started playing with js/canvas/WebGL just a few months before this project started. I enjoy coding visual, arty things. Have a long experience working with interactivity.

Can you describe your role in this project?
I was responsible for the “soup” or the interactive 3d parts. Like how you “paint” the animals, the grass, etc. How you move through the environments. Worked closely with Chris to try and make it as close to his vision as we could. Did a lot of mockups/sketchcoding early on to try out different directions.

Klas and director Chris Milk working on the soup.

I also did some research about the 2d parts early on for a few different approaches. For example to triangulate the animations and render them with WebGL.

What do you think was the biggest challenge?
For me personally it was being a bit new to javascript, don´t have that extensive experience working with 3d either. That was definitely a threshold. The other big challenge was to try and make Chris, the director, happy and get close to his vision. That was a constant tweaking, testing, changing and revising all the way until the day before launch.

Another challenge was that the engine was and is constantly being developed while you try and produce something that should just work.

What is the most impressive thing you experienced in the process?
The most impressive thing to me, is the fact of how far the modern browsers have come in the last few years when it comes to javascript performance. And then WebGL takes it even further. Having been a bit inside the flash-bubble for many years that was kind of an eye-opener. It´s also very fun, easy and accessible to play with.

Klas and Branislav Ulicny optimizing the experience.

What do you think the future of WebGL will be?
It may very well become the “standard” for 3d on the web, it´s still way to early to say though. I guess it will be decided partly by were the most active community is and where it becomes most easily accessible for the “average” developer. And partly by which direction the big players(like gamedev companies) move, they tend to move quite slowly though.

But I can imagine that there will be a co-existence between WebGL and molehill (flash 3d), where one uses the other as a fallback. We are already seeing companies like Mandreel (http://www.mandreel.com/) who´s setting up pipelines that output equal results in both WebGL and molehill, some examples: http://www.mandreel.com/?page_id=850

There is no question that realtime 3d will be the “next big thing” when it comes to the web, though.

Any other reflections or insights you want to share?
I really like that companies like Google invest and dares to try things like this.

Klas on Twitter: @oosmoxiecode

— BRANISLAV ULICNY, DEVELOPER

What is your background?
I come from academia, computer science and have a PhD (EPFL).

Can you describe your role in this project?
I focused on the three.js engine, tools/asset pipeline, code and asset integration. I was “the gatekeeper” and final outpost before anything got deployed.

Chris and Branislav reviewing.

What do you think was the biggest challenge?
Sheer complexity of the thing: there are about 41 thousand lines of JavaScript code, hundreds of megabytes of source assets, thousands of files.

What is the most impressing and cool thing you experienced in the process?
Playing with 3d worlds in the browser: interactive tweaking of the look, flying around. And monster cows.

What do you think the future of WebGL will be?
WebGL is very powerful; we are just starting to explore what’s possible. While still being a very young technology with some growing pains, it’s already “good enough” for many use cases that before could have been done only as desktop applications.

Branislav working with Chris and Double C.

Any other reflections or insights you want to share?
Progress in browsers is astonishing, just one year ago ro.me wouldn’t be possible. If you want to see the future, don’t look at the current state, look at the rate of change.

See more of Branislavs work here.

Twitter: @alteredq

— BARTEK DROZDZ, DEVELOPER

Can you shortly say something about your background?
I used to be a Flash Developer for more than 10 years. Always interested in 3d graphics, about 2 years ago I started to look around at other technologies that offered better performance when it comes to realtime rendering. First I moved on to Unity3d and, beginning this year, I started my adventure with WebGL. Next stop? Who knows, maybe some 3d on mobile devices…

Can you describe your role in this project?
I was part of the team of developers responsible for the core experience of 2d and 3d animations. The project was pretty long – almost 5 months, so my role changed a few times. I started by doing many prototypes to capture the vision of our director, then worked on the pipeline to get models from 3d editors into WebGL, then moved over to code some parts of the underlying engine. Towards the end I focused on how to render the 2d animations.

Bartek, next to Chris, walking through 2D.

What do you think was the biggest challenge?
Everything :) From the first day to the last, most of what I was doing was a challenge. I did program with Javascript before but never on such scale, and WebGL is a much lower level API than Papervision or Unity3d which I was used to. Because of that I had so catch up on some serious math. At some point I even took a few days to write my own 3d engine, just to learn and understand the technology. Last but not least, it was my first project where we used Git to manage the source code.

What is the most interesting thing you experienced in the process?
The most fascinating thing was WebGL itself. By offering low level access to the GPU, it gives the developers more power and flexibility to do creative coding. Once you are past the first, a bit intimidating, phase of getting to know the API you immediately feel a great creative energy. Even though the project is now over, I do new WebGL experiments everyday, just because it’s so fun!

What do you think the future of WebGL will be?
It has a great future, and more companies should now decide to create experiences similar to RO.ME. I hope that soon realtime 3d will no longer be associated only with games, but will start being applied for many other domains of interactive storytelling.

See more of Barteks work here

Twitter: @bartekd

— MIKAEL EMTINGER, TECHNICAL DIRECTOR

Can you shortly say something about your background?
I worked 13 years in the computer games industry before switching to the web four years ago.

Can you describe your role in this project?
I was the technical director (for North Kingdom) focusing on framework development and pipeline challenges. For example, we added new functionality to Three.js – shadows, object hierarchies, skinning, sound, level of detail, morphing and a lot more. Not all of this was used in the final experience, but will hopefully help others in future projects.

Mikael and producer Marcus Ivarsson in LA discussing the overall experience.

What do you think was the biggest challenge?
To get all different parts – video, animation, 3d-worlds and interactivity, to works smoothly together technically and as a consistent narrative.

What is the most impressing thing you experienced in the process?
The power of WebGL and shaders, at such an early stage – it’s only been around officially for about three months.

What do you think the future of WebGL will be?
I really hope Microsoft either quits doing browsers or joins the bandwagon. WebGL has the potential to fundamentally change the way we think about the web, but all players have to get behind it to make it fly.

Twitter: @mikaelemtinger

— KLAUS LYNGELED, 3D ARTIST

Can you shortly say something about your background?

I come from a game background, but have also worked on animated commercials, short movies and music videos. Previous game projects, Enter The Matrix, Sacrifice, Ignition, Wild9 and lately Weewaa. Today I run small creative game/animation studio called Zoink Games. We do anything, as long as it’s fun and creative :)

Can you describe your role in this project?
My main role was to help out setting a style that was actually possible to make in WebGl. Once the style was designed on “paper” my job was to build the worlds with Martin and Jonas. Having worked with all sorts of 3D engines from the game space, we have learned a few tricks that was applicable to WebGl.

What do you think was the biggest challenge?
Trying create a unique style that did NOT feel like a video game. As soon as something is build in 3D and has that kind-of poly textured look it tends to look like video game. Trying to come up with a totally new look from scratch and still make it run real-time was a real challenge. Working with a totally new 3D engine was also quite hard, as the tool chains are not developed.

What is the most impressing/cool/interesting/fun thing you experienced in the process?
Having a team compiled from so many different parts of the world is really interesting. Working with a guy from Slovenia in more than 3 months and finally get to meet him face to face was really fun :)
I also thought it was really impressive how much candy there was at the North Kingdom office! Insane amounts.

What do you think the future of WebGL will be?
It will be glorious and very shiny!

More from Klaus www.zoinkgames.com

Part 1 — Process
Part 2 — Exploration
Part 3 — Team

—

Beneath, a collection of the technical and design exploration.

The first rough storyboard by Anton Eriksson we did based on Chris vision. The vision included three worlds; The City, The Prairie and The Dunes.

– The City

Here we where playing around with some visual ideas on one of the first renderings of the city. The idea was to make a pretty minimalistic graphic solution, with the tech limitations in mind.

Above some form exploration of the city. We know we had to think about the amount of polygons so we needed to keep stuff simple, specially when we didn’t know at this time how much performance “The Soup” would take.

The eyes was something we just played around with. Chris wanted to move in another direction so we took them away.

Below another route where we explored another atmosphere together with painted textures.

We worked with Mirada who developed all the creatures present in the experience.
Check out their nice case study here.

Above another thought that we choose not to go forward with in the City. We had an idea of a mirror world underneath the surface, a more twisted version of the dream world.

Below; technical prototyping of the city environment through WebGL. We called it “code storming” instead of brain storming and was just like creating sketches. In code. An extensive amount of testing was required to get it right. A lot of playing around. It also gave us the opportunity for tweaking the interaction too.

Just click on the links to explore!

Mouse Cubes Test 1
Mouse Cubes Test 2
Mouse Cubes Test 3
Mouse Cubes Test 4
Mouse Cubes Test 5
Mouse Cubes Test 6

Mouse Ribbon Test 1

Mouse Ribbon Test 2

Mouse Ribbon Test 3

Mouse Ribbon Test 4

Snapshot Progress 1

Snapshot Progress 2

Snapshot Progress 3

Snapshot Progress 4

Snapshot Progress 5

– The Prairie

This part was very tricky for us to play with. At this time we was just focusing on form exploration but at the same time the “logical” part of us told us to think about the performance. Yes, WebGL is very powerful but we knew the “soup” from Mirada had lot of amazing animations so even if we painted with brushed we know that this part would be more flat and polygon made later on.

Another direction we tried to see if we could find a more unique style. Keeping the lo-poly but adding more painted textures for a different feeling.

Below, some of the technical exploration. Just click the links to explore!

Black Soup Test 1
Black Soup Test 2
Black Soup Test 3

Prairie Snapshop Progress 1
Prairie Snapshot Progress 2

– The Dunes

Working with the dunes was very exciting and we tried to find way to stick to the surreal aspect of the story, without making it too eerie. The floating city, that was up and down, felt interesting was a thing that added to that mood.

– More information…

You can get more information and explore more of the prototypes on www.ro.me/tech

Also don’t miss:

Part 1 — Process

Part 3 — Team

Part 1 — Process
Part 2 — Exploration
Part 3 — Team

—

“You have to find something that you love enough to be able to take risks, jump over the hurdles and break through the brick walls that are always going to be placed in front of you. If you don’t have that kind of feeling for what it is you are doing, you’ll stop at the first giant hurdle.”

– George Lucas

Making ROME and “3 Dreams of Black” happen was a true collaborative effort from all parties involved. The team of extraordinary talent coming together functioned across the globe – Slovenia, Poland, London, Los Angeles, New York, San Francisco, and Philadelphia as well as spread across Sweden – with Stockholm as the hub for the overall effort.

The way the team worked was almost like one big creative brain. We had daily 15-minute meetings with the core team where everyone reported their progress, their goals for the next 24 hours and most importantly, if they had any problems and in that case if they needed help.

In the beginning of the project we had nothing more than some early WebGL experiments as our building blocks. We knew very little about how far we could go. Basically we needed to create a complete technological framework to accomplish the vision that came from the director Chris Milk and the team from Google Creative Lab.

Mr Doob (Lead Developer Google Creative Lab), Aaron Koblin (Creative Director, Google Creative Lab) and Micke Emtinger (Technical Director, North Kingdom) hangin out in @Radicalmedia in LA.

Some of the first steps were to:

- Immediately visualize the vision and put it in a context of an interactive production. We had a script and nothing more and that needed to be abstracted for everyone to see in what direction we where heading.

Bartek Drozdz (developer, North Kingdom), Aaron Koblin (Creative Director, Google Creative Lab), Chris Milk, Riccardo Tagliabue (Art Director, North Kingdom) in a late night session at the North Kingdom office.

- Set up daily routines where everyone in the team met and reported their status as well as ventilated problems and asked for help by their team members. No one in the team knew everything. It was a complete collaboration where trust and respect served as the main bolts keeping the ship together.

We created a grid where all the different layers involved in creating this piece were represented. The storyline with each different chapter were represented as the X-axis with all the different production segments were lined up on the Y-axis. This way we could chapter by chapter get an overview of what each of the major production segments were supposed to be doing.

The grid served as a skeleton on which we could all focus to holistically understand what we needed to accomplish.

Storyboards and prototyping was a very important part of the process.

STICKING TO THE RULES.

Another guiding aspect in the process was one of North Kingdoms “golden rules” that helped us forward, the, somewhat obscenely labeled, “FUCK-rule”.

F stands for functionality and comes first, U stands for Usability and is second most important, C is cosmetics and gets its fair amount of attention when the two first items are covered off on and last comes K that stands for Kärlek – the Swedish word for love. There was a lot of love making in the end.

The FUCK-rule served as a great tool to prioritize and keep focus on the right things in the different steps of the process.

Embracing new technologies also means adapting to new circumstances in somewhat unfamiliar environments. This meant that the creative pipeline was a bit different from more common platforms, such as Flash where you know more what level of quality and performance is achievable.

Tech meeting January 13th, 2011. Bartek Drozdz (developer) is explaining some ideas in front of Marcus Ivarsson (Producer, North Kingdom), Sandra Nam (Google) and Ricardo Cabello (Mr Doob).

Bartek Drozdz is showing the first mock up of the “soup” made with Unity, to Chris.

We always aimed as high as possible; one thing that held us back a bit was the fine balance of amount of assets and level of detail versus GPU frame rate and overall performance. We did not only want it to look great, it needed to function too.

North Kingdom at Mirada, who would made what we called “the soup” that users would control. It’s Mathias who is sitting in the lower left corner, concentrating on his 3D.

We are proud to have been given the opportunity to be part of this and also very humble for the result. It’s astonishing to see the capabilities of true teamwork and equally as astonishing to see the immense potential of WebGL.

Get a full glimpse of the work development and prototyping and also find out what the team thought of the production right here:

Part 2 — Exploration
Part 3 — Team

The installation at Skellefteå Airport is now built. It’s a fantastic feeling to see how your sketches become reality and it looks as good as you hoped for. Skellefteå Snickericentral (SCC) have done an amazing work, they are great cabinetmaker! The whole thing will be launched next week so I keep my fingers crossed from New York where I’m right now, that everything turns out good! We still have some minor problems with the technology but I think everything will work smoothly. We will launch the web version and some documentary movies from the Airport within a week I hope.

The very first test of the screen on place. December 10th, 2010, at 12:38 AM. Mia Vallmark, Project Manager, stands in front of the for moment only blue screen, like a digital gateway…

Read full post

Walt Disney Parks and Resorts Online contacted us after they saw “Get the glass” and wanted us to work on a project with them and T.Rowe-Price. They wanted to create a fun game for kids that also teaches them about finance.
Beyond that, the brief was quite open, and we worked on about 10 different concepts before we settled for one. And then we set out to develop the game together with the creative team at Walt Disney Parks and Resorts Online.

CONCEPT DEVELOPMENT

Concept sketch – This was the first sketch to illustrate the concept that was later chosen. It shows slightly oversized characters fulfilling different tasks in a small town.

Concept illustration – The illustration below was used to talk about the concept further: it would be a board game, there would be three different levels with different visual themes, and different means of transportations between the levels. You can also see that there were to be crossroads to vary the game, and what kind of landing spaces we were looking into.

A bit into the project we were asked if we could make the model into a globe. Of course we accepted the challenge. Here’s a rough sketch of the camera set up.

As many times before, we used the sketcher Anton to find the right look of the model world.

When the style was set we moved on to modelling, to show what modifications come with going from sketch to model. The island, the bridge, the tree and the house in this picture are physical, the water and surrounding landscape is 3D.

Read full post

When we got the request from Goodby, Silverstein & Partners there were as many uncertainties in our heads as there were immediate ideas on how this game could come together. The core idea was having banners on different sites wich would transform the web page to a battlefield with Cheetos fighting over it.

Building a war game with lots of fun shooting and exploding action was of course something we all would love to do. But there were a lot of technical and conceptual exploration ahead of us.

– EXPLORATION

Initially we spent a lot of time exploring the core idea – the web page transformation. By doing comps and simple animation tests we could test the look and feel of it.

Further exploration was on user experience and the start-up flow. The game was supposed to be accessible from both banners and from a direct url link.

– GAMEPLAY

Next step was to develop the gameplay. This was done by extensive wireframing and by creating comps showing how the interface could work. At an early stage we decided to work with a more or less static scene in a small scale. Giving the feeling of a puppet show or something similar.

Prototyping was essential for further development. Although everything looked really crude at this stage, actually being able to play the game gave us the nessesary feedback for refining and tuning the underlying mechanics.

– DESIGN

As gameplay was getting defined it was time to create the visual world of Cheetos warfare. Character and weapons were based on a created storyline with inspiration from both contemporary console games as well as from old cartoon violence.

Some of the early concept art was created by illustrator Therese Larsson.

To find the right look and feel for the weapons references were collected. We looked for something with a realistic but yet imaginative look. As if theese objects actually could exist for real in this small scale.

Characters and weapons were built in 3D Studio Max and Maya and skillfully animated by our own 3D artists.

An animation test showing a battlescene with effects and overlay graphics.

In-game images and intro were storyboarded and discussed before production.

Intro called for extensive work in 3D including added effects in Combustion and Adobe Premiere.

Work in progress on interface screens.

– SCREEN SHOTS

3D-work included several versions of Chester suited-up as military commander.

Screen shots from battle. At an early stage it was decided not to scale screens to different screen resolutions. This to maintain the quality of images and pre-rendered movie clips. This proved to be more difficult than imagined.

Final result of intro sequence. Finally the world of Cheetos warrior really came to life. And with the right balance of cuteness and mischievious violence.