ViroShaderModifiers

ViroShaderModifiers is a collection of modifiers grouped by the specific stage of the rendering pipeline where they should be injected. Each property can be either a raw GLSL string (which defaults to the body) or a ViroShaderModifier object for more control.

Property	Types	Description	Required
geometry	string | ViroShaderModifier	Modifies vertex data before it is transformed by the model-view-matrix.	optional
vertex	string | ViroShaderModifier	Modifies the vertex position after it has been transformed into post-projection (NDC) space.	optional
surface	string | ViroShaderModifier	Modifies surface properties (diffuse color, normals, roughness, etc.) before lighting is calculated.	optional
fragment	string | ViroShaderModifier	Modifies the final pixel color after all lighting calculations are complete.	optional
lightingModel	string | ViroShaderModifier	Allows you to override or extend how light interacts with the surface.	optional

---

ViroShaderModifier Object

When you need more control than a plain GLSL string, pass a ViroShaderModifier object. This allows you to declare custom uniforms, varyings, and pipeline requirements.

TypeScript

type ViroShaderModifier = {
  code: string;                    // GLSL snippet injected into the stage
  uniforms?: ViroShaderUniform[];  // custom uniforms bound to this modifier
  varyings?: string[];             // custom varyings shared between stages (v2.53.0)
  requiresSceneDepth?: boolean;    // bind the scene depth buffer as v_scene_depth (v2.53.0)
  requiresCameraTexture?: boolean; // bind the live AR camera feed as v_camera_texture (v2.53.0)
};

type ViroShaderUniform = {
  name: string;
  type: "float" | "float2" | "float3" | "float4" | "sampler2D";  // sampler2D new in v2.53.0
  defaultValue?: number | number[];
};

Properties

Property	Type	Description
code	string	The GLSL snippet that will be injected into the pipeline stage.
uniforms	ViroShaderUniform[]	Array of custom uniforms. Each uniform is available in code by its name. See ViroShaderUniform.
varyings	string[]	New in v2.53.0. Array of GLSL varying declarations (e.g. "varying float vFade;"). Lets you pass data from a geometry or vertex modifier to a surface or fragment modifier.
requiresSceneDepth	boolean	New in v2.53.0. When true, the engine binds the scene depth buffer as a sampler2D named v_scene_depth. Useful for soft-particle effects, depth-based fog, and occlusion.
requiresCameraTexture	boolean	New in v2.53.0. When true, the engine binds the live AR camera feed as a sampler2D named v_camera_texture. Enables effects like projecting real-world imagery onto geometry.

Example — Custom varying with scene depth

JavaScript

import { ViroMaterials } from "@reactvision/react-viro";

ViroMaterials.createMaterials({
  softParticle: {
    diffuseColor: "#FFFFFF88",
    shaderModifiers: {
      geometry: {
        code: "vFade = position.y / 2.0;",
        varyings: ["varying float vFade;"],
      },
      fragment: {
        code: `
  float sceneZ = texture2D(v_scene_depth, _surface.diffuseTexcoord).r;
  float fade   = smoothstep(0.0, 0.02, abs(sceneZ - gl_FragCoord.z)) * vFade;
  _output_color.a *= fade;
`,
        varyings: ["varying float vFade;"],
        requiresSceneDepth: true,
      },
    },
  },
});