From concept painting to repost, an artist’s journey in open source demos

Releases for Babylon.js are one of our most hectic and exciting times on the team. There’s a big push to make sure everything is solid and ship-worthy while also preparing our most visible content that highlights the new engine features. This is where I spend most of my time pre-launch: pushing our release demos through concept, design, modeling, texturing, animation, shader design, and writing the code to tie it all together.

For our 4.1 release of Babylon.js, we launched our new node material editor. This tool makes shader creation more intuitive while also adding a layer of optimization for any users who aren’t versed with authoring in glsl. I knew I had to go big with the demos we created for node material so I decided to create custom magic effects on classic fantasy weapons to show how you could push this new system to create game assets similar to what we are used to seeing in native game engines.

The new Babylon.js node material editor released in version 4.1

I started by gathering references to inspire the design of my assets and lock myself into the style of the fantasy genre common in classic massively multiplayer games. I also decided to throw back to a nostalgic style of hand-painted textures which reinforced the stylized look I was going for. I infused that inspiration into the initial sketches and refined them into painted concepts of the assets.

Then it was on to modeling, which was fairly quick since I was working from refined concept art. However, there was increased complexity in the UV unwrapping of the assets as I had to decide how the animated glow effects in the shader would affect how I would be painting the textures. After a couple of quick prototypes, I was able to land on a compromise between the ease of the animation of glow effects and being able to paint the diffuse texture in an undistorted layout.

Concept sketches and final concept painting for one of the assets of the demo.

I spent a lot of time working up to the style I wanted for the painting of the textures. This is a style that I rarely work with, so I did some intense study of the brush strokes made by artists who have lived this style. This is where the time spent collecting reference art was invaluable. Being able to look at how different artists create their strokes helped me land on my style for these assets. It was both frustrating as I was trying to find the right way of laying down color and satisfying once my hand started to build that muscle memory to render the style consistently.

From there, I built the shaders and particle systems that would sell the effects. I wanted animated transitions and layered motion for the glow effects and particles to create a reveal that had several surprises for the viewer as each effect builds. And each weapon had a different challenge — from a glow spreading from the blade edge, to a sequential and pulsating glow, to the incorporation of morph targets for mesh animation. Each weapon needed a unique solution in the shader and accompanying animations so that we could demonstrate many of the nodes in the new editor.

Low poly model for one of the demo assets

Even after all the effort put into planning and creating the art assets, I still needed to write 1,000 lines of code to load the assets, create and sequence animations, control the effect states, animate the scene to create pleasing transitions, and add a simple UI layer for the user to interact with the demo. For the version we added to the release video, I scripted the motion of the demo to key presses so we could replicate and tweak the motion for recording.

After a successful launch, I looked back on the process and felt a great sense of accomplishment. This was a complex demo that took a lot of planning, time, and effort. It also relied on every tool I have in my kit for creating art. Then a couple of weeks after launch, one of my teammates found a tweet where someone showed a video of the playground containing my demo and used vague wording that could be misconstrued as claiming credit for making the demo in their spare time. And from the comments on the thread and lack of clarification, it appears that a majority of the people engaging assumed this was made by the author of the tweet.

The final style I settled on for the painting of the diffuse textures of the assets

Now I am certain that every professional artist working today has had to deal with some form of having their work claimed by someone else. This can range from someone reposting a piece of art without a link or crediting the creator as a way of farming engagement to the blatant tracing of an artist’s work and passing it off as their own. This is a problem that can cause a lot of headaches for freelance artists as it robs them of the social media engagement that could create connections for future work.

So how did I react when I saw this thread? I was overjoyed! Wait… what? Why would I be overjoyed? It’s because the person who authored the tweet was outside our normal sphere of communication, and they were getting engagement from a network which did not intersect with our normal audience and may not know about our engine. This was reach into a different region and demographic than we see in our forums and all of them were being introduced to Babylon.js.

One of the shaders enabling the animation of glow effects on the assets

But how is this different than any other form of reposting that commonly happens to artists? It’s because my work as an open source artist has a slightly different goal than an artist posting content to promote their work. I create assets with the intention of sharing them out to the community to be taken, remixed, expanded upon, and learned from. The goal here is to spread awareness for Babylon.js and the person who reposted the demo mentioned it was made in Babylon.js. Some people engaging with the thread mentioned they had not been aware of Babylon.js, so we were witnessing our reach increasing in real time.

This type of organic growth of awareness is ideal, so I want to do what I can to create the conditions that promote it. I aim to create content that will excite our current and potential users to dive into the code and assets of a demo and see how it was made. Even better, if they take what I build and expand upon it in some way, we gain the benefit of them sharing it with their networks. In this sense I am not using the art I create as a means to grow my brand and secure future work; instead I want it to drive awareness and recognition for the engine. And if it can also be a teaching moment to show a new or unexpected technique in the engine then we are succeeding on multiple levels.

The final render of the asset in the demo combining model, hand-painted textures, shader effects, and particle systems

In the end, we want to excite people to engage with our content and inspire them to build off what we’ve done. And the only way for that to happen is to put in the time and effort needed to make content that is unexpected or eye-catching and makes people wonder how it was done. I will keep trying to make content that excites and I hope our community continues to take what I’ve made and build upon it. I can’t wait to see what you make in the future!

Babylon.js: Powerful, Beautiful, Simple, Open — Web-Based 3D At Its Best.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store