Build Three.js Shaders with GLSL and TSL
Custom Three.js effects require careful handling of shader inputs, color conversion, and renderer compatibility. This skill provides GLSL and TSL examples for building effects and diagnosing common material errors.
Kopieren Sie diese Anfrage in Ihren Agent. Sie enthält die maßgebliche Skill-Seite und das Manifest.
Review the Skillstore skill "threejs-shaders" from https://skillstore.io/skills/cloudai-x-threejs-shaders.md and its manifest at https://skillstore.io/api/skills/cloudai-x-threejs-shaders/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Ihr Agent sollte weiterhin seinen Plan anzeigen und alle von der Sicherheitsrichtlinie verlangten Bestätigungen anfordern.
Verwenden Sie diese Links, wenn ein KI-Agent, Crawler oder Skript sauberen Kontext benötigt, statt die vollständige Seite zu lesen.
„threejs-shaders“ wird verwendet. My ShaderMaterial renders darker than a built-in material with the same color.
Erwartetes Ergebnis:
„threejs-shaders“ wird verwendet. My custom ShaderMaterial stops working after switching to WebGPURenderer.
Erwartetes Ergebnis:
„threejs-shaders“ wird verwendet. All instances overlap when I use my own vertex shader.
Erwartetes Ergebnis:
All 118 static findings are false positives from Markdown formatting, JavaScript shader strings, GLSL entry points, and shader chunk keys. The reviewed documentation contains rendering examples and relative texture loads, with no evidence of shell execution, credential access, reconnaissance, or prompt injection. No evidence found of malicious intent or additional semantic security risks.
Teile den versionierten Bewertungsbericht, das neutrale Badge, die Einbettungskarte und Zitate. Skillstore berichtet Nachweise, ohne zu entscheiden, ob dieser Skill sicher ist.
https://skillstore.io/skills/cloudai-x-threejs-shaders/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/cloudai-x-threejs-shaders?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/cloudai-x-threejs-shaders?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/cloudai-x-threejs-shaders/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/cloudai-x-threejs-shaders.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>cloudai-x. (2026). threejs-shaders security audit report (audit version 1) [Author version unspecified]. Skillstore. https://skillstore.io/skills/cloudai-x-threejs-shaders/audits/1@techreport{cloudai-x-cloudai-x-threejs-shaders-2026,
author = {cloudai-x},
title = {threejs-shaders security audit report (audit version 1)},
institution = {Skillstore},
year = {2026},
number = {1},
url = {https://skillstore.io/skills/cloudai-x-threejs-shaders/audits/1},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "threejs-shaders security audit report (audit version 1)"
version: "unspecified"
type: report
authors:
- name: "cloudai-x"
date-released: "2026-11-07"
url: "https://skillstore.io/skills/cloudai-x-threejs-shaders/audits/1"
identifiers:
- type: other
value: "skillstore:cloudai-x-threejs-shaders:audit:1"
description: "Skillstore immutable audit report identifier"
Create color waves, displacement, or Fresnel effects while keeping shader uniforms and color conversion consistent.
Adapt dissolve shaders and custom instanced attributes for scene objects, then inspect shader errors and coordinate spaces.
Translate GLSL effects into node materials and reusable TSL functions for WebGPURenderer with its WebGL 2 fallback.
Use threejs-shaders to create an animated color wave on a plane in Three.js r186 with WebGLRenderer. Include time uniforms and output color conversion.
Review my Three.js r186 shader: [paste shader and renderer setup]. Diagnose dark colors, missing uniform declarations, and coordinate-space mismatches. Explain the required corrections.
Add animated vertex displacement to my r186 MeshStandardMaterial with onBeforeCompile: [paste material setup]. Preserve lighting and use distinct program cache keys for shader variants.
Port this GLSL dissolve effect to a reusable TSL Fn for Three.js r186: [paste shader]. Use WebGPURenderer, updatable progress, and portable texture sampling. Identify backend-specific assumptions.
Autor
cloudai-xLizenz
Unbekannt
Skillstore-Revision
r1
Versionshinweis
Der Autor hat keine Version angegeben.
Ref.
c993c6abcbffafea2683d7748b53b3dfaf438415
Aktualität der Wartung
9.11.2026
Nutzung
0 Downloads · 0 Aufrufe
Dateistruktur
📄 SKILL.md
Projektarchitektur analysieren
Neue Codebasen sind ohne einen wiederholbaren Prüfprozess schwer zu verstehen. Dieser Skill gibt Claude, Codex und Claude Code einen strukturierten Workflow zum Erfassen von Stack, Architektur, Befehlen und Konventionen.
Bessere API-Verträge entwerfen
API-Teams benötigen vor der Implementierung konsistente Verträge. Dieser Skill leitet bei Entscheidungen zu REST, GraphQL, OpenAPI, Fehlern, Versionierung und Sicherheit an.
Anwendungs-Performance optimieren
Langsame Anwendungen können Engpässe über Frontend-, Backend-, Datenbank- und Algorithmusebenen hinweg verbergen. Dieser Skill unterstützt Profiling, gezielte Korrekturen und Vorher-Nachher-Messungen.
Zuverlässige Tests für Codebasen entwerfen
Viele Teams fügen Tests ohne klaren Plan hinzu, wodurch Lücken und langsame Test-Suites entstehen. Dieser Skill unterstützt bei der Auswahl von Testtypen, Vorlagen, Coverage-Zielen und Validierungsschritten.
Parallele KI-Subagenten koordinieren
Komplexe Projekte enthalten oft unabhängige Aufgaben, bei denen Zeit verloren geht, wenn sie nacheinander bearbeitet werden. Dieser Skill zeigt, wie parallele Subagentenarbeit geplant, gestartet, gesammelt und zusammengeführt wird.
Softwarearchitektur entwerfen
Architekturentscheidungen prägen Liefergeschwindigkeit, Wartbarkeit und Skalierbarkeit. Diese Skill unterstützt bei der Auswahl von Mustern, der Projektstruktur und der Dokumentation von Entscheidungen.
Effiziente GLSL-Shader-Effekte erstellen
von sickn33
GLSL-Shader-Arbeit ist schwer zu strukturieren und zu optimieren. Dieser Skill bietet Anleitung zu Shader-Syntax, Uniforms, Varyings, Vektormathematik, Raymarching und Performance-Entscheidungen.
Apply and Optimize PixiJS v8 Filters
von pixijs
PixiJS filter effects can fail when shader APIs, renderer settings, or package imports do not match version 8. This skill guides filter setup, custom shaders, and performance tuning with focused examples.
Build Custom PixiJS v8 Shaders and Filters
von pixijs
Custom PixiJS rendering requires precise shader bindings, uniform types, and renderer-specific resource handling. This skill provides patterns and references for building shaders, filters, and advanced GPU workflows.
Build Interactive Three.js Scenes
von freshtechbro
Building browser-based 3D scenes requires coordinating rendering, assets, interaction, and performance. This skill provides Three.js examples, reference guides, and a WebGL starter to support implementation.
Bessere Webspiele entwickeln
von sickn33
Browserspiele erfordern sorgfältige Entscheidungen zu Engines, Rendering, Assets, Audio und Offline-Unterstützung. Dieser Skill hilft Claude, Codex und Claude Code dabei, praktische Webspielarchitekturen zu planen.
Interaktive 3D-Web-Erlebnisse erstellen
von sickn33
Teams haben Schwierigkeiten, 3D hinzuzufügen, ohne Geschwindigkeit oder Benutzerfreundlichkeit zu beeinträchtigen. Dieser Skill unterstützt bei Stack-Entscheidungen, Asset-Pipelines und Mustern für interaktive Szenen.