Custom Shaders & Particle Systems
Add custom shaders and particle systems to your Frame environments using Blender
Frame is the easiest way to carve out your own corner of the metaverse with assets like 3d models, 360 photos, web browsers, and a whole lot more. It runs right from the web on desktop, mobile, and VR. Just because it runs on the web browser, though, doesn't mean you can't achieve fantastic looking visuals.
Background Knowledge
Suggested background knowledge: shaders, particle systems, Blender
Frame is built with babylon.js, a powerful, open-source development framework from Microsoft. Because we use babylon, shaders or particle systems created with babylon.js tools work really nicely in Frame.
For example, babylon.js has a node-graph shader creation tool called the Node Material Editor that lets you create shaders, sophisticated virtual effects that run on the GPU. They also have a no-code particle system creator that lets you create stunning particle systems.
Bringing Shaders into Frame
If you want to bring those shaders or particles into Frame at run-time, like bringing something into Frame on the fly during a meeting or class, you can do that while in Frame itself. Here's a tutorial about how to do that. You can do this without Blender.
However, let's say you wanted to include these shaders or particle systems inside your environment model itself, and set things up using Blender or another 3D modeling tool. There are a few reasons why you would want to do this.
For starters, the shader you include in your environment won't be 'modifiable' like it otherwise would be if you brought it in at runtime. So, other users with edit permission won't be able to edit it or remove it - it becomes a permanent fixture of the environment.
Using Blender for Shaders
Using something like Blender to set up your shaders also lets you apply the shader directly to meshes in your environment model. In contrast, when you bring in a shader asset at runtime, we create some geometry and apply the shader to it and you can manipulate it to place it where you want.
Naming Convention
In Blender, just include that snippet ID in the name of the mesh you want to apply it to, and then when it loads in Frame that shader or particle system will be applied to it. Put shader_nm_snippetID in the name of the mesh, replacing 'snippetID' with the actual shader snippet ID. For particles, use particle_effect_particleID.
Example
Here is a Frame where Frame teammate Eric Eisaman has loaded in a .glb file he created in Blender that leverages this technique to put a beautiful crystalline shader on the floor, and a sweet sparkly particle system in the sky: framevr.io/blender-shader
Remember: Babylon.js particle snippets and shader snippets are not interchangeable. Use shader_nm_ for shaders and particle_effect_ for particles in your mesh names.
Ready to build with Frame?
Join thousands of creators who are building amazing 3D experiences with Frame VR.
For technical assistance, please contact us at support@framevr.io or reach out via our Discord community.
For general inquiries or feedback about Frame, please email hello@framevr.io