shader-graph

Create and edit Lens Studio shader graphs, GLSL code nodes, and library subgraphs.

16|2|Updated Apr 13, 2026
One-click install
npx skills add https://github.com/lens-studio-devs/ls-extensions --skill shader-graph-lens-studio-devs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: shader-graph
Source: https://github.com/lens-studio-devs/ls-extensions/tree/main/plugins/ls-clad/skills/shader-graph
Command: npx skills add https://github.com/lens-studio-devs/ls-extensions --skill shader-graph-lens-studio-devs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Authoring Lens Studio .graphShader files by hand is error-prone because the YAML schema hides defaults, uses non-obvious conventions (sibling CheckEnabled/CheckExists keys, stripped ClassType1 values, Connection0-only wiring), and requires manifest lookups for every template's port set. This Skill encodes those rules so an agent can produce valid shader graph YAML on the first try. ## Core Features & Use Cases - Shader graph authoring: Add, delete, and connect nodes in .graphShader YAML with correct LevelID, DependencyIndex, and Connection0 semantics. - Custom GLSL code nodes: Write node_util_custom code nodes using port decorators (input_*, output_*, global_*) and the full system.* API for surface data, lighting, camera, matrices, and random functions. - Library subgraph embedding: Remap LevelIDs and wire .subgraphCommon containers into a parent graph without breaking internal connections. - Parameter nodes: Expose user-tweakable Inspector controls (float, color, bool, texture, droplist) with valid ScriptName and placement rules. - Use Case: Ask the agent to build a scrolling-noise material; it starts from the bundled codeNode.graphShader example, writes the GLSL, adds parameter nodes, and produces a working shader graph file. ## Quick Start Ask the agent to create a custom shader graph that samples a texture with UV distortion using a GLSL code node and exposes the distortion strength as a parameter.

Frequently Asked Questions about shader-graph

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a custom shader in Lens Studio with a code node?

Start from the bundled codeNode.graphShader example and edit the GLSL in the node_util_custom code node. Declare ports with input_* and output_* decorators, write main(), and set TemplateVersionMinor to 2 on the node block.

How do I connect two nodes in a Lens Studio shader graph YAML file?

Add a Connection0 block on the destination node's input port containing the source node's LevelID and the source port's map key. Each port supports at most one incoming connection, and non-LINK ports keep their Variable value as a fallback.

When should I use shader-graph instead of the materials or vfx-graph skills?

Use shader-graph for creating or editing custom shaders in .graphShader files, GLSL code nodes, and shader subgraphs. Use materials for tweaking existing material properties, and vfx-graph for .graphVfx particle graphs.

Why is ClassType1 missing from some ports in shader graph YAML?

The codec strips ClassType1 on save when the class can be re-inferred from the port's structure, covering FLOAT, INT, BOOL, STRING, COMBO, and LINK. Only write ClassType1 for preserved classes like COLOR, MATRIX, TEXT, and REFUID.

Can a custom code node create vertex-to-fragment interpolants in Lens Studio?

No, code nodes cannot create interpolants. Use the dedicated Interpolate template nodes for vertex-to-fragment varyings, and use them sparingly since varyings consume GPU resources.

Why does my asset query return stale data after writing a shader graph file?

Lens Studio reimports the asset asynchronously after the file changes. Wait at least 1 to 2 seconds between writing the graph YAML and running any verify-by-query step such as asset-graphql reads.