skills.rest
Makio64
Makio64COMMUNITY
Explore all skills by this author →
Website𝕏@makio64GitHub

integrate-tsl-precompile

Integrate vite-plugin-tsl-precompile into Vite-based three.js applications for AOT shader artifact generation.

8|Updated Apr 20, 2026
Search Tags:#vite#threejs#webgpu#shader#tsl#precompilation
One-click install
npx skills add https://github.com/Makio64/vite-plugin-tsl-precompile --skill integrate-tsl-precompile
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: integrate-tsl-precompile
Source: https://github.com/Makio64/vite-plugin-tsl-precompile/tree/main/.agents/skills/integrate-tsl-precompile
Command: npx skills add https://github.com/Makio64/vite-plugin-tsl-precompile --skill integrate-tsl-precompile

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill solves the performance overhead of runtime TSL shader compilation in three.js applications by enabling ahead-of-time (AOT) precompilation of native WGSL and GLSL artifacts.

Core Features & Use Cases

  • Automated Capture: Automatically detects NodeMaterial constructors and captures real render paths to generate shader artifacts.
  • Production Optimization: Supports a compiler-free slim mode that removes the TSL compiler from production bundles for faster load times and reduced memory usage.
  • Use Case: Use this skill to migrate a complex WebGPURenderer application to a production-ready state where all TSL materials are pre-validated and precompiled, ensuring zero runtime shader compilation errors.

Quick Start

Use the integrate-tsl-precompile skill to audit the current project and begin the automated capture process for all TSL materials.

Frequently Asked Questions about integrate-tsl-precompile

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

FAQPage Schema
How do I precompile TSL shaders in a Vite and three.js application?▼

Precompile TSL shaders by integrating vite-plugin-tsl-precompile into your Vite build process to automatically detect NodeMaterial constructors and generate native WGSL or GLSL artifacts ahead of time.

What is ahead-of-time TSL shader compilation and when do I need it?▼

Ahead-of-time TSL shader compilation captures WebGPU and WebGL 2 render paths during development to generate static artifacts, eliminating runtime shader compilation overhead and errors in production.

Does vite-plugin-tsl-precompile support WebGPU and WebGL 2 render paths?▼

Yes, the precompilation plugin supports development-time capture of both WebGPURenderer and WebGL 2 render paths to validate and generate native shader artifacts for three.js materials.

How do I remove the TSL compiler from my three.js production bundle?▼

Activate the compiler-free slim mode during production builds to strip the TSL compiler from your bundle, resulting in faster load times and reduced memory usage by using precompiled artifacts.

What are the limitations of precompiling TSL materials for WebGPU?▼

TSL precompilation requires strict adherence to peer dependency versions and systematic verification of all render topologies to ensure the generated artifacts match your application's rendering paths.

Why do I need to verify render topologies when precompiling three.js shaders?▼

Systematic verification of all render topologies is required because the automated capture process must map every NodeMaterial constructor to its exact WebGPU or WebGL 2 execution path to prevent runtime errors.

Related Skills

Explore More Software Engineering Skills→
linegellinegel
5

threejs-volumetric-clouds

Implement volumetric cloud systems in Three.js using WebGPU, TSL, and NodeMaterial.

Community
Advanced
AvneeshSarwateAvneeshSarwate
4

power2d-codegen

Generate TypeScript shader modules from WGSL and GLSL sources.

Community
Advanced
tanepipertanepiper
27

particles-gpu

Render large particle counts via GPU instancing and custom shaders in Three.js.

Community
Advanced
designerzendesignerzen

webgpu-threejs-tsl

Develop WebGPU shaders for Three.js using TSL node materials and WGSL.

Community
Intermediate