スキル threejs-shaders
📦

threejs-shaders

コンテンツリビジョン r1 安全 ⚙️ 外部コマンド

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.

対応: Claude Codex Code(CC)
Maintain this Skill? Claim it 📊 73 十分

自分のエージェントでインストール

このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。

エージェントリクエスト
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.

エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。

エージェントが読めるリソース

AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。

Markdown詳細 GET /skills/cloudai-x-threejs-shaders.md 署名済み manifest GET /api/skills/cloudai-x-threejs-shaders/manifest 署名済み lockfile GET /api/skills/cloudai-x-threejs-shaders/lockfile

テストする

「threejs-shaders」を使用しています。 My ShaderMaterial renders darker than a built-in material with the same color.

期待される結果:

  • Color uniforms created with THREE.Color hold linear values.
  • Apply the tone mapping and color space chunks after writing the fragment color.
  • Check the render target and output pass before adding another color conversion.

「threejs-shaders」を使用しています。 My custom ShaderMaterial stops working after switching to WebGPURenderer.

期待される結果:

  • ShaderMaterial and onBeforeCompile belong to the WebGLRenderer workflow.
  • Use MeshBasicNodeMaterial for an unlit effect or MeshStandardNodeMaterial for a lit effect.
  • Rewrite the effect using TSL nodes and reusable functions instead of passing GLSL shader strings.

「threejs-shaders」を使用しています。 All instances overlap when I use my own vertex shader.

期待される結果:

  • Declaring an InstancedMesh does not apply its instance transforms inside a custom shader.
  • Apply instanceMatrix before the model-view and projection transforms.
  • Custom offset attributes also require bounds that account for the displacement.

セキュリティ監査

安全
v1 • 2026/11/7 バージョン別レポートを開く

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.

1
スキャンされたファイル
498
解析済み行数
0
レビュー項目
0
誤検知を無視

リスク要因

⚙️ 外部コマンド (50)
SKILL.md:12-29 SKILL.md:36-37 SKILL.md:48-64 SKILL.md:64-68 SKILL.md:68 SKILL.md:70-72 SKILL.md:83-84 SKILL.md:92-94 SKILL.md:94-96 SKILL.md:96 SKILL.md:98-101 SKILL.md:112-113 SKILL.md:121-123 SKILL.md:123-127 SKILL.md:127-141 SKILL.md:141-143 SKILL.md:143-145 SKILL.md:145-151 SKILL.md:151-153 SKILL.md:153 SKILL.md:157-159 SKILL.md:159-163 SKILL.md:163-165 SKILL.md:165 SKILL.md:171-177 SKILL.md:186-187 SKILL.md:193-197 SKILL.md:197-201 SKILL.md:201-203 SKILL.md:203-205 SKILL.md:214-215 SKILL.md:227-229 SKILL.md:229-231 SKILL.md:231 SKILL.md:235-249 SKILL.md:249-253 SKILL.md:253 SKILL.md:255-263 SKILL.md:270-271 SKILL.md:275-280 SKILL.md:280-282 SKILL.md:282-286 SKILL.md:286-288 SKILL.md:288-298 SKILL.md:301-307 SKILL.md:307-309 SKILL.md:309 SKILL.md:311 SKILL.md:315 SKILL.md:317-318
最新の完了済み静的・セマンティック監査では、確認済みのセキュリティ検出事項は見つかりませんでした。これは、スキルに副作用がないことを証明するものではありません。
監査者: codex
このレポートを共有・引用

バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。

バージョン別レポートを開く
セキュリティ評価

レポートリンクをコピー

https://skillstore.io/skills/cloudai-x-threejs-shaders/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdownバッジ

[![Skillstore security assessment](https://skillstore.io/badges/skills/cloudai-x-threejs-shaders/security.svg)](https://skillstore.io/skills/cloudai-x-threejs-shaders?utm_source=security_passport_badge)

HTMLバッジ

<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>
学術引用 (APA · BibTeX · CFF)

APA形式の引用

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

BibTeX形式の引用

@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} }

CITATION.cff

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"

Skillstore スコア

このスコアの理由 証拠の信頼度: 中
55
アーキテクチャ
65
保守性
87
コンテンツ
65
コミュニティ
74
仕様準拠

作成できるもの

Add Animated Product Materials

Create color waves, displacement, or Fresnel effects while keeping shader uniforms and color conversion consistent.

Prototype Game Visual Effects

Adapt dissolve shaders and custom instanced attributes for scene objects, then inspect shader errors and coordinate spaces.

Migrate Effects to TSL

Translate GLSL effects into node materials and reusable TSL functions for WebGPURenderer with its WebGL 2 fallback.

これらのプロンプトを試す

Create a First Shader 
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.
Diagnose a Material Problem 
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.
Extend a Lit Material 
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 a Dissolve Effect 
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.

ベストプラクティス

  • Check the installed Three.js release and renderer backend before choosing GLSL shaders or TSL node materials.
  • Keep lighting vectors in one coordinate space and verify texture color spaces before adjusting shader colors.
  • Inspect compiled shader errors and visualize intermediate values before adding more effect logic.

回避

  • Use ShaderMaterial or onBeforeCompile under WebGPURenderer instead of selecting node materials.
  • Mix world-space camera directions with view-space normals when calculating Fresnel or rim lighting.
  • Copy obsolete shader chunk names or TSL imports without checking the targeted release.

よくある質問

Which Three.js version does this skill target?
The documentation targets Three.js r186. Check APIs and shader chunk names when using another release.
Can I use it with Claude, Codex, and Claude Code?
Yes. The skill provides Markdown guidance and examples for these assistants, rather than a separate executable tool.
Does ShaderMaterial work with WebGPURenderer?
No. The skill directs WebGPURenderer users to TSL node materials instead of ShaderMaterial, RawShaderMaterial, or onBeforeCompile.
Can it help migrate GLSL effects to TSL?
Yes. It explains node material slots, reusable functions, uniforms, texture sampling, and backend-specific GLSL or WGSL limitations.
Does the skill include textures or a runnable application?
No. It contains one documentation file. You must provide a Three.js project and any referenced texture assets.
Does it automatically test shader correctness or performance?
No. It explains compile error inspection and visual debugging, but you must run and test effects in your target environment.

開発者情報

作成者

cloudai-x

ライセンス

不明

Skillstore リビジョン

r1

バージョンに関する注意

作者はバージョンを宣言していません。

リポジトリ

https://github.com/cloudai-x/threejs-skills/tree/0e181866f095b5f06d005133876e926515390d95/skills/threejs-shaders

参照

c993c6abcbffafea2683d7748b53b3dfaf438415

メンテナンスの新しさ

2026/11/9

利用状況

0 ダウンロード · 0 閲覧

ファイル構成

📄 SKILL.md

cloudai-x のその他のスキル

すべて表示

関連スキル

すべて表示