본문으로 건너뛰기
cccskills
무료GitHub에 공개

webgpu-threejs-tsl

Reference WebGPU APIs, TSL syntax, node materials, WGSL integration, compute shaders, and post-processing in Three.js. For complete particle canvases use threejs-particle-canvas; for GLSL shaders use rocaille-shader. Triggers on TSL shader, WebGPU renderer, node material, WGSL, GPU compute, WebGPU setup.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

설치 방법 보기

포함된 파일(18)

  • SKILL.md3.1 KB
  • docs/compute-shaders.md15.3 KB
  • docs/core-concepts.md10.7 KB
  • docs/device-loss.md9.0 KB
  • docs/limits-and-features.md4.9 KB
  • docs/materials.md8.6 KB
  • docs/post-processing.md13.0 KB
  • docs/wgsl-integration.md6.4 KB
  • examples/basic-setup.js2.2 KB
  • examples/custom-material.js4.2 KB
  • examples/earth-shader.js8.4 KB
  • examples/particle-system.js7.2 KB
  • examples/post-processing.js5.1 KB
  • README.md275 B
  • REFERENCE.md8.8 KB
  • references/motion-gpu-pipeline.md1.8 KB
  • templates/compute-shader.js9.3 KB
  • templates/webgpu-project.js6.2 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

WebGPU Three.js with TSL

TSL (Three.js Shading Language) is a node-based shader abstraction that lets you write GPU shaders in JavaScript instead of GLSL/WGSL strings.

Quick Start

import * as THREE from 'three/webgpu';
import { color, time, oscSine } from 'three/tsl';

const renderer = new THREE.WebGPURenderer();
await renderer.init();

const material = new THREE.MeshStandardNodeMaterial();
material.colorNode = color(0xff0000).mul(oscSine(time));

Skill Contents

Documentation

  • docs/core-concepts.md - Types, operators, uniforms, control flow
  • docs/materials.md - Node materials and all properties
  • docs/compute-shaders.md - GPU compute with instanced arrays
  • docs/post-processing.md - Built-in and custom effects
  • docs/wgsl-integration.md - Custom WGSL functions
  • docs/device-loss.md - Handling GPU device loss and recovery
  • docs/limits-and-features.md - WebGPU device limits and optional features

Examples

  • examples/basic-setup.js - Minimal WebGPU project
  • examples/custom-material.js - Custom shader material
  • examples/particle-system.js - GPU compute particles
  • examples/post-processing.js - Effect pipeline
  • examples/earth-shader.js - Complete Earth with atmosphere

Templates

  • templates/webgpu-project.js - Starter project template
  • templates/compute-shader.js - Compute shader template

Reference

  • REFERENCE.md - Quick reference cheatsheet

Key Concepts

Import Pattern

// Always use the WebGPU entry point
import * as THREE from 'three/webgpu';
import { /* TSL functions */ } from 'three/tsl';

Node Materials

Replace standard material properties with TSL nodes:

material.colorNode = texture(map);        // instead of material.map
material.roughnessNode = float(0.5);      // instead of material.roughness
material.positionNode = displaced;         // vertex displacement

Method Chaining

TSL uses method chaining for operations:

// Instead of: sin(time * 2.0 + offset) * 0.5 + 0.5
time.mul(2.0).add(offset).sin().mul(0.5).add(0.5)

Custom Functions

Use Fn() for reusable shader logic:

const fresnel = Fn(([power = 2.0]) => {
  const nDotV = normalWorld.dot(viewDir).saturate();
  return float(1.0).sub(nDotV).pow(power);
});

When to Use This Skill

  • Setting up Three.js with WebGPU renderer
  • Creating custom shader materials with TSL
  • Writing GPU compute shaders
  • Building post-processing pipelines
  • Migrating from GLSL to TSL
  • Implementing visual effects (particles, water, terrain, etc.)

Resources

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Search academic papers, build literature reviews, and synthesize research findings — combines Exa MCP (research_paper category, arxiv filtering) with arxiv-mcp-server for paper discovery, download, and deep analysis. Triggers on academic paper, literature review, research synthesis, arxiv, find papers, scholarly search.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

tdimino/claude-code-minoan412026년 10월 16일 업데이트

Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

tdimino/claude-code-minoan412026년 10월 16일 업데이트

This skill should be used when creating, auditing, or maintaining AGENTS.md files and Codex CLI configuration for any project—including initializing AGENTS.md for cross-agent compatibility (Codex, Cursor, Copilot, Devin, Jules, Amp, Gemini CLI), generating config.toml or .rules files, scaffolding .agents/skills/, converting CLAUDE.md to AGENTS.md, or auditing existing agent configs for bloat and staleness. Complementary to codex-orchestrator (which executes subagents; this skill creates the config files they consume).

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

tdimino/claude-code-minoan412026년 10월 16일 업데이트

Academic research skill for Biblical Hebrew, Semitic linguistics, cuneiform studies, and comparative Ancient Near Eastern research. Provides Sefaria API for Hebrew Bible, CDLI/ORACC for cuneiform databases, and web discovery via Omnisearch, Exa, Firecrawl, and Obscura for finding scholarly sources across JSTOR, Perseus, Persée, Google Scholar, and academia.edu. Triggers on Hebrew quotes, cuneiform, Sefaria, ANE research, Minoan, search for scholarship, find papers, literature review, scholarly search, academic search, Genesis/Tehom, Ugaritic, Talmudic sources, extract from PDF, OCR academic.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

tdimino/claude-code-minoan412026년 10월 16일 업데이트

Build comprehensive ARCHITECTURE.md files following matklad's canonical guidelines — bird's-eye views, ASCII/Mermaid diagrams, codemaps, invariants, and layer boundaries. Triggers on document the architecture, create ARCHITECTURE.md, map this codebase, architectural overview.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

tdimino/claude-code-minoan412026년 10월 16일 업데이트

Generate physically-based atmospheric scattering shaders — sky domes, planetary atmospheres, LUT-optimized pipelines, depth-aware post-processing. Four modes — sky-dome, atmosphere-post, planet, lut. Triggers on atmospheric scattering, sky shader, sunset rendering, planet atmosphere, Rayleigh scattering, Mie scattering, volumetric sky, sky dome, atmosphere post-processing, aerial perspective, transmittance LUT, sky rendering, realistic sky, planetary rendering.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

tdimino/claude-code-minoan412026년 10월 16일 업데이트

tdimino의 스킬 모두 보기

이 스킬의 문제 신고