A-Frame’s Hidden PBR Super Powers
Over the holiday I decided on a whim to checkin on an issue I’d submitted to the A-Frame project several years ago.
The TLDR is that I was annoyed at the lack of exposure of the various kinds of maps that existed on the material component. The situation at the time had reduced some of the most powerful physical based rendering (PBR) maps to single digit values even though ThreeJS had gained the ability to render them and environtal maps were available.
I was pleasantly surprised to see after the course of a year or so people eventually thought it was useful to have these maps exposed. But I spotted something that irked me a bit at first.
https://github.com/aframevr/aframe/pull/2722#issuecomment-360165519
So it’s a plausible workflow, but not one I really want to recommend or advertise with an example unless people are using it successfully.
It really set me off that some really basic feature wouldn’t even get a minor spot in the documentation. So I decided this weekend to rectify this non-idealness years ago by writing this article.
Why is exposing these maps so important to the virtual reality and the metaverse at large?
Let me start off by saying, I love 3D modeling. I learned Blender over the course of some 10 years. I think it’s badass I can now add GLTFs so easily to AFrame. I think the progression of my skills went through something like this:
- Learn “lego” style modeling by able to move cubes and spheres
- Learn how to add simple textures to cubes and spheres
- Learn how to pull around vertices of very basic shapes
- Learn how to UV unwrap and apply seamless textures
- Learned how to use boolean object creation
- Learned how to sculpt
- Learned how to texture using paint based approaches
- Learned how to use physical based rendering textures
This was over the course of many years of suffering and putting on and off doing art in virtual worlds. I’m not alone in this experience.
What I believe is important to the future of the metaverse is allowing people of all art skills to participate and have fun
I think that’s what irked me about the hiding of these PBR materials, because in the back of my head I just imagined some person who only knew how to use seamless textures and very primitive shapes feeling extremely limited because of some ivory tower decision to not share info. This has been going on for years sadly, and I hope to correct it today.
What’s did PR #2722 add?
Two simple things available on the material component:
metalnessMaproughnessMap
Basically, what was exposed was the ability to make things shiny in awesome ways by using an image to represent shinyness (instead of a single number).
These things can be combined to add PBR materials to any simple OBJ shape.
<a-obj-model
src=”sphere.obj”
position=”0 1 -3"
material=”
src:beaten-up-metal1-albedo.png;
displacementMap: beaten-up-metal1-Height.png;
displacementScale: .2;
ambientOcclusionMap:beaten-up-metal1-ao.png;
roughnessMap:beaten-up-metal1-Roughness.png;
metalnessMap:beaten-up-metal1-Metallic.png;
metalness: 1;
normalMap:beaten-up-metal1-Normal-ogl.png;”>
</a-obj-model>Let’s see the results!
Demo ( use WASD controls ):
https://richardanaya.github.io/aframe-pbr-seamless/
The full source code is at:
If you try this on your own, be sure to add an environmental map to get some interesting lighting to see your PBR textures to their full effect, checkout this awesome component that can autogenerate cool environments!
A dream of a seamless PBR texture library for the internet
I hope one day making materials is much easier for participants in the web virtual reality. It should not be hard for a future up and coming artist to make some shape in their metaverse life look like metal or wood. In the meantime, we have websites like
But hopefully one day, creating materials in our life will be as easy as playing around with sliders.
A Thank You
In the end, while my grumbliness lead me to create this article, I owe a thanks to the people who took my random comment/whim and made it into something available to the masses (quietly). Have fun out there making something beautiful.
