PBR In Frame Environments

PBR In Frame Environments

May 21, 2023 4:50 PM

Hey there! Ready to dive into some cool techniques for crafting the "Experiments" environment in Frame? We made this environment to flaunt the visually impressive stuff you can achieve with Frame. Just scroll down the environment picker to find it. But heads up: these techniques might be a bit heavy on computation, potentially affecting performance on mobile and VR. If you're all about performance, stick to other techniques like using baked lighting and unlit materials.

PBR Materials: The Magic Behind Realism

PBR (Physically Based Rendering) is all about mimicking the way light plays with real-world materials. With PBR in FRAME, your materials will dynamically interact with scene lights, making your environments feel alive, realistic, and super immersive.


Frame’s got your back with these PBR inputs:

  • Base color: can be a solid color or an image texture
  • Metallic: black value says "nope" to metallic; white value goes full-metal
  • Roughness: black value shines like a mirror; white value is all about that diffuse, non-reflective vibe
  • Emission: black isn't emissive; white is all about the glow (Note: Emission can't be a light source in FRAME, but it will stand out in darker areas)
  • Alpha: black rocks transparency; white is 100% opaque
  • Normal: adds oomph to simple geometry, giving objects texture, depth, and visual flair with real-time lights

You can drive these inputs with single values or image textures when exporting from Blender. Let's chat about setting up PBR materials for Frame in Blender and then jump into the Babylon.js node material editor.

PBR Materials in Blender for Frame: Making it Work

Make sure your textures are all cozy with a principled shader in Blender. Got complicated node trees? Bake them to image textures to make them Frame-friendly. Craving more flexibility? Use Babylon.js node material editor for node-based materials—we'll get to that in a bit. Here's when extra nodes come in handy:

  • Vertex colors: multiplied by base color on export; use a color mix node set to multiply in Blender for a sneak peek of your material's FRAME look
  • Multiple grayscale textures (like metallic, roughness, emission) in one image texture: use a "separate color" node to connect each channel to its matching input on the principled shader
  • Normal map node: the trusty sidekick that always goes between the normal texture and the principled shader

Keep in mind Frame’s 50 MB file size limit for uploaded environments. Got lots of PBR materials? Compress those image textures! Convert transparency-free textures to JPG and compress them to shrink file sizes. To convert and compress images straight from Blender:

  1. Open an image editor area
  2. Select the "image" tab at the top of the image editor and click "save as"
  3. Pick your save directory, file format, color mode, and compression level (using the quality slider)

Lights in Blender for Frame: Let There Be Light!

Our Experiments environment sports animated lights to show off dynamic interactions between lights and PBR materials. Wanna add lights to your own environments? Here's how:

  1. Press Shift+A for the add menu
  2. Head over to the light tab
  3. Add point, sun, or spotlights (FRAME is cool with these, but area lights? Not so much)
  4. Place lights strategically for maximum wow factor (up to 6 lights per environment)
  5. In the object data properties tab, tweak power and color of lights (Note: power levels vary between Blender and FRAME, so be prepared for some back and forth testing to find the perfect power level. We've found that levels between 0.1 and 2 work pretty well without turning your FRAME environment into a supernova)

Lights in Frame: A Little Extra Shine

Over on the Frame side, there are a few settings that influence your scene's lighting. Scroll down in the "frame settings" panel to find these two nifty toggles:

  • Enable default scene light: Flip this switch to turn the default hemispheric light on or off. Super useful if you want your environment lit solely by lights exported from Blender.
  • Enable shadows on 3D models: This toggle summons a directional light that casts shadows on objects with PBR materials. But remember, this only works if the "Enable default scene lights" toggle is enabled.

And there you have it! You're all set to create dazzling PBR environments for FRAME that will leave everyone in awe. Remember to have fun, experiment, and let your creativity run wild. Happy designing!