Can I use this for custom GLSL shaders?

Absolutely. The skill provides boilerplate and best practices for both ShaderMaterial (with built-in uniforms) and RawShaderMaterial for full control.

Does it help with WebGL performance optimization?

Yes, it provides guidance on choosing the right material for the job, such as using MeshLambertMaterial for matte surfaces to save on computation.

Does this skill support PBR (Physically Based Rendering)?

Yes, it includes detailed configurations for MeshStandardMaterial and MeshPhysicalMaterial, covering roughness, metalness, and environment mapping.

How do I create glass effects with this skill?

The skill offers specific MeshPhysicalMaterial templates that include properties for transmission, thickness, and Index of Refraction (IOR) for realistic glass.

Three.js Materials & Shaders

Name: Three.js Materials & Shaders
Author: sickn33

bysickn33

•

31,721

•

ゲーム開発

Configures and optimizes Three.js materials for high-performance 3D rendering and realistic visual effects.

This skill empowers Claude to efficiently handle all aspects of Three.js material implementation, from standard PBR (Physically-Based Rendering) workflows to advanced custom GLSL shaders. It provides instant access to boilerplate for MeshPhysicalMaterial, MeshStandardMaterial, and specialized types like Toon or Normal materials. Whether you are debugging z-fighting, implementing environment maps, or creating complex glass effects with transmission and thickness, this skill ensures best practices for performance and visual fidelity in WebGL applications.

主な機能

01Ready-to-use examples for complex effects like glass, car paint, and toon shading

02Optimization tips for material properties, blending modes, and depth testing

03Standardized templates for all Three.js material types including PBR and Physical

0431,721 GitHub stars

05Advanced GLSL ShaderMaterial and RawShaderMaterial boilerplate

06Implementation guides for environment maps, textures, and AO mapping

ユースケース

01Optimizing WebGL performance by selecting the most efficient material type for specific meshes

02Creating custom visual effects using GLSL vertex and fragment shaders

03Building realistic 3D scenes requiring physically-based rendering (PBR)

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add sickn33/antigravity-awesome-skills threejs-materials

For use in Claude.ai and ChatGPT

主な機能

01Ready-to-use examples for complex effects like glass, car paint, and toon shading

02Optimization tips for material properties, blending modes, and depth testing

03Standardized templates for all Three.js material types including PBR and Physical

0431,721 GitHub stars

05Advanced GLSL ShaderMaterial and RawShaderMaterial boilerplate

06Implementation guides for environment maps, textures, and AO mapping

ユースケース

01Optimizing WebGL performance by selecting the most efficient material type for specific meshes

02Creating custom visual effects using GLSL vertex and fragment shaders

03Building realistic 3D scenes requiring physically-based rendering (PBR)

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add sickn33/antigravity-awesome-skills threejs-materials

For use in Claude.ai and ChatGPT