Characters: Designing Customizable Colors in Blender & Three.js

How we look and how we feel about ourselves is intimately connected. In Relm, we want you to feel at home, and firmly in your own shoes while building and being part of your community online.

To that end, we’ve put a lot of thought into character customization, and the technology that goes into it. This is part 1 in a series of posts explaining why and how we’re making customizable characters for you. And if you’re building similar technology, we hope you can benefit from our lessons learned.

The Low-Poly, Low-Bandwidth Constraint

One of the major constraints for character design in a web browser environment is the size of the character assets. We want the world to load quickly, and we want it to render at 60 fps for people with regular phones or computers (let’s say, 2015 or more recent).

We could design a whole bunch of characters to give variety and self-expression to people who take up an avatar in Relm; however, each character would be a new asset file and a new set of data to download for each participant. If there are 100 characters to choose from, that means everyone in the world needs to download 100 character assets so they can see everyone else’s avatars.

One Character, Many Colors

Instead, it would be ideal if we could create one character design that lets a participant choose their character’s colors: skin color, hair color, clothing colors, etc.

The challenge is that a 3D model has many surfaces (“faces” in 3D modeling lingo) and vertices, but it’s unclear to the game engine which surfaces or vertices belong to what “parts” of the 3D model. If we want the player to be able to change their skin color, for example, the game engine doesn’t know how do differentiate surfaces that are skin from those that are clothing. We need a way to “annotate” the model and say “these vertices belong to the feet” or, “this surface belong to the torso”.

Blender already has the tools we need to create the type of 3d model that would enable color customizations:

  • colored vertices
  • vertex groups, and
  • face maps

However, exporting to glTF (the native format supported by three.js) doesn’t necessarily keep all of that information. The current built-in glTF exporter throws it away.

We needed to add some capabilities to the glTF exporter, as well as to the Relm engine (which uses three.js), so that participants can select colors for their avatar’s skin, hair, clothing and other aspects of self-expression.

Custom Blender Exporter

If you download & install the following addon to Blender (replacing the default glTF Import/Export addon), it will include Vertex Group & Face Map metadata from Blender in the glTF (or .glb) files you export:

If you’re new to addons, see this tutorial on how to install the addon in Blender.

The source code is also available if you’d like to see inside. Our Github repository is a fork of the official glTF-Blender-IO addon, and is available at

Blender can assign Vertex Groups or Face Maps in Edit Mode

As you can see in the Blender screenshot above, you can create named Vertex Groups or Face Maps. Vertex Groups can be used for coloration, but we found that they were less than ideal because a colored vertex will “blend” its color with adjacent vertices. In other words, you won’t get clean lines of separation between colors as you’d want between, say, a white shirt and a black belt (it would be white-grey-black).

We recommend using Face Maps for custom colorization because you’ll get both a slightly smaller file size, as well as clean, separate colors from face to face (see “viewer” below).

Exporting a glb / glTF file in Blender

If you’re interested in the technical details:

  • Each Vertex Group is added to the three.js geometry attributes as a _vg_[vertex_group_name] custom attribute (e.g. you can access the four Vertex Group shown in the screenshot as mesh.geometry.getAttribute('_vg_four')). It contains what is essentially a “mask” where 0 means a vertex is “not in the set” and 1 means a vertex is “in the set”. Thanks to scurest‘s work, the exporter is smart enough to use a sparse index if there are just a few vertices in the group.
  • All Face Maps are added to the three.js geometry attribute as a single _facemaps attribute. Each vertex is given a Face Map group ID from 0 to n (where n is the number of Face Maps being exported). If a vertex does not belong to a face with an assigned group, it is given the value -1. There is an additional userData.facemaps property in the userData field of the mesh that contains the geometry. This property holds the names of the Face Maps, in an array. For example, ["top", "bottom"] would mean that Face Map group 0 is named top and Face Map group 1 is named bottom.

See this Github issue for further details.

Custom glTF Viewer

Don McCurdy’s glTF viewer is the gold standard in knowing, “does this glTF work in three.js?” However, in order to support these custom attributes, we needed to modify the viewer to see the _vg_[vertex_group_name] and _facemaps attributes and teach it how to use them to color a section of the model.

You can clone or download our custom glTF viewer and run it locally on your machine. In addition, you can try it out here if we still have it running (no guarantees on this fast-paced project, sorry!)

Putting it All Together

With Vertex Groups or Face Maps as annotations for various parts of the character model, your character designer can annotate the “hair”, “face”, “shirt”, “boots” or whatever else you need to be able to color as separate parts. Then, the game engine can tell which parts of the model are semantically separate and take the vertices’ colors and lerp them towards a new target color (e.g. change the hair to “blonde”).

Finally, using these basic building blocks, we’ll be able to design a character creator in Relm. Next, we’ll explore how to use morph targets and animations to make the character have different body shapes and genders, all while being able to re-use the same animation data.

We can’t wait for you to be able to express your presence the way that you would like to, and be with others in the Relm community!


Video & Audio Considerations

If you’ve had enough privilege to be connected through technology on any level over the past year or longer, you might understand the problems on a subconscious level or even cognitive level surrounding the complexity of tech and how it can both assist in connecting to others and get in the way of it.

If we zoom out for a moment, we can see that there are detailed and high-level questions surrounding our use of tech, and how it plays into a users first experience with new hardware and new software. How do we bridge the gap for new users? What about the older generation who aren’t as used to tech? What about those in poverty who haven’t had the luxury of time to learn how to use online platforms and install hardware?

There is a natural learning curve when we adapt to new tech, obstacles we face when we attempt to connect online, and we want our experiences inside our online Relms to be as seamless as possible. With this in mind, we have been putting considerable time into discussions and prototypes for the UX Design specifically around Video and Audio capabilities and interface. Our main overarching question is:

In order to get closer to our goal of making the digital worlds of Relm more human and connective, how do we best help people who are having trouble with their camera and microphone?

There are several troubleshooting steps that need to be covered:

1. The participant may not have sufficient network bandwidth for video
2. The participant’s device may not be equipped with a camera or a mic
3. The participant’s device may not be configured correctly for camera/audio
4. The browser permissions may be too restrictive
5. The app’s servers may be having trouble

And in a 3D world:
6. The participant may not have sufficient CPU/GPU to render a 3D world

In addition, there are psychological aspects to overcome:

1. The participant may not realize they are a character in a “game world” that can move around
2. The participant may not realize the world is “live” with other people in it
3. The participant may not want to be seen/heard
4. The participant may need education to understand how to click permissions dialogs

We have open ended questions and it is our hope that over the next few months, we can answer as many as we can, through implementation, iteration and feedback.

Please feel free to support our work by joining the discussions on our Discord Channel or by visiting a Relm.


Mining for Milestones

Ok, I just have to say I’m really proud of the work we’ve accomplished in 3.5 months. Relm 5.0 wasn’t even a line of code on Oct 28 of last year, and we’ve now made more than 250 additions and improvements to the codebase:

Not to mention the many MANY worlds Rey has created, in addition to art, prototypes, mockups, ideas and discussions we’ve had. Thanks @Rey, @ChrisRelm, @Brendan, @Hira, @AlexRelm, @avawoolf and @dane!

Some of the things I’m very proud of having achieved in Relm 5.0:
– Editable 3D HTML labels
– Embedded youtube videos and 3D web pages
– Physics engine with colliders and joints
– The world (each relm) as a shared editable “document”
– Drag-drop world building library
– Flexible object primitives editor
– Very fast rendering (for a browser!)

Needless to say, I’m extremely excited about the next month or so. Milestones that I look forward to include:

1. Portals between relms (this time without reloading!)
2. Multiplayer (shared positional presence)
3. Video bubbles with Hira’s honeycomb algorithm
4. Multiplayer Physics

With the above 4 milestones in place, we’ll be ready for some really cool innovating in virtual locality–how to build community and spiritual-lite practices in a virtual space.


Philosophy Club: Yes or No to Heroes?

On Jan 10th, we had a Philosophy Club meet up between some of our members about the pros and cons of holding up people as heroes or icons in our communities. Philosophy is a personal and practical matter for us, something that changes and challenges how we think and do things. We wanted to capture some of what we discussed in our Jan 10th meeting in regards to heroes and invite you to our next meeting taking place on:

Sunday, Jan 31, 2021 @ 12:00pm MST 
Meeting link:

Synopsis of our JAN 10th Discussion:
Heroes – what is a hero? Can anyone be a hero? Does the concept of a hero overlook the role of the community or individual supporters who often play an integral role in the person’s path to heroic status? Does society benefit or suffer from holding heroes on a pedestal? Are archetypes fundamentally different from heroes?

One of our philosophers, Hawley, astutely categorized three kinds of heroes in our discussion:

  1. Influential people (Role Models / personal sphere)
  2. Living symbol (embodiment of an abstract idea or value) 
  3. Legends fables / gods (Archetypes)

We learn from each other’s mistakes and successes. We thrive off of the inspiration we get from characters in stories because we relate to their emotions and live vicariously through them, thereby trying on virtues and solidifying beliefs. Generally speaking, when we know better, we do better.

Heroes might be especially helpful for children, who need concrete reference points as they form their own identities

Having shared heroes builds group identity and cohesion, which can offer people a much-needed feeling of community and shared emotion/values.

Because heroes represent a personified cluster of virtues, it makes it easier to remember the virtues because they are collected in a being, and it also makes it easier to absorb the examples.

While we do need external reference points to learn from because that’s how we change and grow as human beings, we found it was also important to acknowledge that a community makes a hero. A community can rally around its heroes even while heroes are despised by outsiders of the community.  Great things are most often done by groups of people, and recognizing only the most visible of them as “the hero” erases the contributions of everyone else, including their roles in shaping and supporting the hero.

Heroes are people and imperfect, but we avoid seeing their human complexity so they can fill their role.

When we put heroes on a pedestal, their mistakes can tarnish or misdirect from what they were supposed to represent.

Next Meeting Date:   Sun, Jan 31, 2021 @ 12:00pm MST
Meeting Room Link:

Our topic for this meeting will be to discuss our heroes and role models – who do you look up to and why? Can we find some common Heroes? Do we have shared archetypes? 

Suggested Future Topics: 

  • How should we handle differences in “fact”, or differences in “doctrine”, in the Relm community?
  • What intolerances will we embrace so that we can be tolerant of difference?
  • How will we become better listeners as an online community?
  • What crypto is most ethical?

Do you have a suggested topic? Reply and let us know. 🙂 


Relm is Growing

Happy New Year everyone! We’ve started making a fairly big change to Relm’s direction over the past month–from a business app to a community app. Relm’s new mission is to allow us, as friends, to commune together online in a space that facilitates self-reflection, personal growth, and strong relationships. The people are the center, the technology is there for the assist.

What does this change mean? In some ways, nothing has changed–we’re still avatars running around with video bubbles over our heads at (for example). But in other ways, everything has changed–we’ve given ourselves permission to care deeply about the human condition, about meaning & purpose in life, and how technology helps or hinders us in the pursuit of happiness inside the “world of electric light“. A business typically doesn’t care about these things directly, which is why it felt so incongruent to be focused on these things while selling it as a service.

We’re moving Standup to 9:00 AM MST each weekday (from 7:30 AM) and y’all are welcome to join. We typically hold it in Discord right now (“Standup” voice channel), but sometimes in Relm v4.0.

Also, check out the #events channel (in Discord for now) for upcoming events.


User Interface Ideas

Should we have a “game mode” and a “builder mode”? What does private messaging look like? What does your character’s inventory look like? Is inventory separate from uploading a photo?

We’re discussing the new user interface and we have a lot of ideas!

Rey’s UI sketch is a “whole picture view” of things, trying to integrate many of the ideas we’ve had–a personal profile, a minimap, a thought bar, uploading photos, emojis, and then panels on the left including contact list, inventory, message inbox, builder library, and settings:

My (Duane’s) prototype focuses more on the “content creation” side, using a horizontal expanding panel, or accordion. It includes writing, expressing emotion as emojis, choosing existing photos or uploading new photos, and drawing:

If you’d like to join in the discussion, visit us on Discord. We love meeting other creative minds!


Jitsi + Svelte

We’re happy to announce a new open source (MIT licensed) library called jitsi-svelte, available on npm and github.

I’ve been using lib-jitsi-meet for a few months now and have a little bit of an understanding of its API. A little while ago, we switched to using svelte as our HTML framework in Relm and I’ve absolutely loved it.

So, naturally, we needed a way to bring these two awesome pieces of technology together. Now, the jitsi-svelte library allows you to easily create your own custom Jitsi client, in the Svelte framework.

There are quite a few intricacies to getting video conferencing working well, and if you’re writing a Svelte3-based app, there is some additional complexity in getting all of Jitsi’s events to work together with reactive stores.

Jitsi-svelte simplifies all of this and provides the svelte stores you need to build a web-based video conferencing app. It also provides Svelte components for Audio & Video, among others.

Additionally, users expect to see themselves before entering a video conference, and ideally, need the ability to set up their cam and mic hardware as well. We were inspired by Whereby’s intro screen and created what we call the “Mirror” component that mimics their UX & design.

If you’re developing a svelte-based video conferencing app, check out jitsi-svelte and see if it fits your needs.


Kinder, Gentler Community

Our online spaces need to be more welcoming—they need to have more hospitality, more civilization, and more heaping helpings of kindness. You might be skeptical that there’s hope—after all, the social networks are most often a crap shoot: opening Twitter, for example, is more like “joining the fray” than feeling connected with warm friends.

Relm is a radical attempt to change what’s possible online. We understand the deep responsibility we have to our generation’s psychological health & well-being, and we are building a platform where human connection can grow, even through the thin wires of the internet that now connect our society.

A friend asked today how Relm is a kinder, gentler community. There are a few things we’re working on:

  • Relm is audio on & video-enabled by default—so there’s a more human side to people. We think this is a necessary (but insufficient) requirement to enable our evolved sense of empathy towards each other as human beings.
  • We’re simulating having a body, like in a video-game world, which enables more forms of communication. For example, sitting down with someone indicates more focused attention, or walking away can indicate boredom (among other things).
  • [future work]: There will be a lobby that allows an anonymous person to enter a relm and get “vetted” before entering. Similar to the role a front desk plays at an office building or theme park.
  • [future work]: We want to create a sense of ritual around entering a community, so it doesn’t feel bureaucratic—like your entry depends upon filling out a form correctly (e.g. “login”, “password”). Instead, we want it to be about making a commitment to people—someone (ideally, a friend) gives you a tour and explains the rules of conduct. (We use cryptographic keys generated in-browser to avoid the login form).
  • [future work]: We’ve thought a lot about autonomy vs. control. In some situations, there are stricter expectations around control—imagine an auditorium with 100 people ready to listen to a presentation, for example. We’d like to simulate capabilities similar to civilization in the real world in these cases–a security officer, for example, that has the ability to escort people out if they’ve crossed a line (but we don’t want this to be “first line” tactics, because sometimes disturbing the peace/heckling is a legit form of expression/free speech).

These are just some ideas, but I hope it outlines some of the work that’s going in to making Relm a kind, gentle place where online communities can find health & happiness together. If you’re interested in joining us, come by our Discord channel and chat!


How is Relm better than Zoom?

In some ways Relm is like Zoom (video chat!), but at the same time, a lot of people notice it also looks like… a video game world!? So, what’s up with that, and is it better than Zoom?

Video game worlds are fun, and multiplayer campaigns are so great for building team spirit and camaraderie. If that’s the case, we wonder, then why not use them in our everyday work? Why confine ourselves to bland video chat software?

Today, there are a few things that we think already make Relm better than Zoom:

  • Have you experienced Zoom fatigue? We think it’s so unnatural to be placed with faces towards one another for an hour or more. Having the freedom to move yourself around, shift your attention, and meet in different settings is a big improvement over traditional video conferences–you won’t be as tired, because your brain is naturally novelty-seeking and you’ll find video chat in Relm refreshing.
  • Has your team started using Zoom backgrounds for fun and self-expression? The fact that so many of us take advantage of this points to the need for self-expression. In Relm, you have many more ways to show your mood, tell a story, or create an environment that strikes up conversation. Relm is like a “shared team background” that can be the starting point for team or community culture.
  • When you start up Zoom, you’re always in the same place–facing each other, with your office or synthetic background behind you. In real life, the environment we meet in is a huge social cue that normally constrains what can be talked about. When inviting someone to your home, this signals something far more intimate than meeting in the office. In Relm, you can build environments that allow many types of constraints and levels of intimacy for conversation.

But this is just the beginning! We hope to build a real global village, an open source platform where you can be you, where you can feel belonging and status in a healthy, human way.

Relm is attempting to combine a kind of social network (like Facebook) with video conferencing software (like Zoom or Whereby), with an MMO video game world (like World of Warcraft).

It’s an ambitious project, but one that we feel inspired to attempt today in this work-from-home, school-from-home, everything-from-home environment. We are building the online space that’s worthy of our spending time there. If this is inspiring to you, contact us!


The Online Social Universe Manifesto

Version 1.0

Human beings are fundamentally social creatures. But the world wide web was not designed to meet our social needs. When we look around at the networks we’ve created online, we see a travesty of real connection with each other—sometimes an emotional wasteland filled with failed efforts to see and to be seen, to be with and to belong.

Today, we have Facebook “friends”, Instagram influencers, LinkedIn connections, and Twitter mobs. In addition, we see more depression, anxiety, and loneliness in our society than ever before.

But if we can re-imagine the web the way it should be—not as an inter-linked store of hypertext documents, but as a place to work together and build community together—why not fashion for ourselves an online universe that is pro-social and social-first?

We evolved in a spatial world, and we thrive in 3 dimensions. Video games and MMO worlds have led the way in showing us how to build trust and culture online—and we should take their lessons seriously enough to integrate the experience they offer in fields as far away as remote teamwork and business meetings.

Our surroundings tell us about ourselves, and hold us in relationship to one another. As we work, create, and collaborate together, we need a virtual world in which to do it—not necessarily because it’s efficient, but because it’s the most human way we know to be online together.

We believe that the architecture of the web experience needs to be re-designed for online teams and communities. A healthy online universe for human beings prioritizes:

  • Belonging over status updates
  • Visual and auditory communication over textual communication
  • Real-time interactions over asynchronous requests/responses
  • Rootedness in community over fast network growth
  • Hospitality over bureaucracy (e.g. login forms)
  • Opportunity for human connection (& serendipity) over efficiency
  • Socially meaningful surroundings over missing context or sterile environments
  • Representing ourselves as avatars over having little to no representation of “me”
  • Fun throughout!

The next version of the web experience should be a social universe—a place where we can see, be seen, and belong—just like our ancestors’ communities, but online.