camera-and-rendering

Configure cameras, screen-space rendering, and RenderMeshVisual materials in Lens Studio scenes.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Setting up cameras and rendering in Lens Studio involves non-obvious configuration details—orthographic size semantics, render layers, near-plane values, Canvas requirements, and preset-only object creation—that cause common failures like invisible objects and incorrectly rendered screen-space content. ## Core Features & Use Cases - Camera Configuration: Set up orthographic cameras for top-down 3D views, perspective cameras, and the OrthographicCameraObjectPreset for 2D screen-space content via scene-graphql. - Screen-Space Object Creation: Create ScreenImage and ScreenText objects using presets with correct Canvas, Ortho render layer, near plane of -1, and render order settings. - Visibility Debugging: Diagnose invisible objects with a systematic checklist covering enabled state, materials, render layers, near plane clipping, Canvas presence, and preset-based creation. - Use Case: You are building a 2D-style Lens with UI overlays and 3D elements. Use this Skill to configure the orthographic camera preset, parent ScreenTransform objects under a Canvas, assign materials to RenderMeshVisual components, and debug why an Image is not appearing in the preview. ## Quick Start Set up an orthographic camera for screen-space content in my Lens Studio scene and explain why my Image objects are not rendering.

Frequently Asked Questions about camera-and-rendering

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

FAQPage Schema
How do I set up an orthographic camera in Lens Studio?

For 3D objects, set the Camera component's type to orthographic via scene-graphql, set size to the full visible height in world units, position it above the scene, and rotate to (-90, 0, 0). For 2D screen-space content, use the OrthographicCameraObjectPreset instead of manual conversion.

Why are my screen-space objects invisible in Lens Studio?

Invisible screen-space objects usually result from a missing Canvas component, objects not on the Ortho render layer, a near plane that is not -1, or manual creation instead of using presets. Check each of these in order when debugging.

Should I use an orthographic camera or ScreenTransform for 2D content?

Use a manually configured orthographic camera with RenderMeshVisual meshes when you need physics, colliders, or 3D lighting on flat-looking objects. Use ScreenTransform with the OrthographicCameraObjectPreset when you need UI-style layout with anchors, text, and Image components.

How do I assign a material to a RenderMeshVisual component?

Assign materials via the scene-graphql setProperty mutation targeting the RenderMeshVisual component ID with propertyPath materials.0 and valueType REFERENCE. Materials are always an array, and the ID must be the component ID, not the scene object ID.

Why does setProperty fail on camera properties in Lens Studio?

Camera property names differ between the Editor API and the runtime Lens API—for example, clearColorOption exists only at runtime. Query the component's properties field via scene-graphql or check editor.d.ts to discover the correct Editor API property names.