specimen

Specimen：アイコンを作る

Specimen アイコンを1つ作ります。柔らかな角丸タイルの上に置かれた、光沢のあるオブジェクトを1つだけ作り、展示ケースの中の作品のように照らします。色は光だけで表現します。継ぎ目なくループします。1つのピースファイルから、パストレーシング動画またはライブのラスター要素として、ダークテーマとライトテーマの両方を出力します。

examples/ にある作品が基準です。何かを書く前に、依頼に最も近いものを読んでください。作ったものがそれらと並べて違和感があるなら、まだ完成ではありません。

作成するのは1つだけです。ピースファイル <name>.specimen.js です。タイル、スタジオ、ライト、ポスト処理、テーマ、パストレーサー、デノイザー、エンコードは固定されており、runtime/ にあります。runtime/ は編集しないでください。変更したコピーを貼り付けたり、すでにある機能を再実装したりしないでください。ランタイムに何か足りないと思ったら、回避策を実装するのではなく、その人に伝えてください。

以下に記載したファイルはすべて、このスキルのフォルダーにあります。ピースはその人の作業ディレクトリ（または指定された場所）に作成します。メディアは指定された場所（public/icons/ など）か、ピースの隣に置き、アイコン名を先頭につけます。プロジェクト内に独自のフォルダーを作成しないでください。スクリプトは、このフォルダー内のパスを指定して、作業ディレクトリから実行します。

Specimen はこのスキルだけで動作します。npm パッケージはなく、インストール手順もありません。npm install は実行しないでください。その人のプロジェクトに依存関係を追加しないでください。ピースで three をインポートしないでください。必要なものはすべて ctx 経由で取得します。

スキルのフォルダー

specimen/
  SKILL.md          this file
  concepts.md       objects that read well, metaphors by product area, what failed
  package.json      { "type": "module" }, so Node reads this folder's scripts the same under any project
  render.mjs        piece → webm + mp4 + poster per theme (video), or runtime + piece + posters (--live)
  sheet.mjs         contact sheet: raster frames, a dark row and a light row per piece; --pt, --guide
  validate.mjs      the measurable rules (section 5)
  piece.mjs         reads a piece in Node: its name, its syntax errors with the line, the contract
  session.mjs       opens a piece on the runtime page in headless Chrome
  cdp.mjs           Chrome finder, a minimal DevTools Protocol client and a static server
  runtime/          fixed — never edited
    specimen.js     the bundle: three (WebGPU), the path tracer, the denoiser, the stage, <specimen-icon>
    weights.tza     the denoiser's weights
    THIRD_PARTY_NOTICES.md  the bundled packages' and the weights' licences; --live ships it as specimen.js.LICENSE.txt
    page.html       the page render, sheet and validate load a piece into
  examples/         the reference pieces (section 7)

スクリプトはプレーンな node（22 以降）で実行でき、Node 組み込み機能のみを使用します。マシン上にすでにある Chrome（または SPECIMEN_CHROME）を操作します。動画には ffmpeg が必要です。不足しているものがあれば、スクリプトがその名前を示します。不足しているものを正確に伝え、入手方法（brew install ffmpeg）を案内してください。自分でインストールしてはいけません。

---

0. 納品

コンセプトを考える前に、まず次の内容を1つのメッセージで確認してください。

動画（デフォルト）— パストレーシングで <name>-dark.webm/.mp4 と <name>-light.webm/.mp4 を作成し、それぞれにポスターを付けます。さらに <video> スニペットを用意します。最も見栄えがよく、テーマごとに数百 KB 程度で、どこでも再生できます。 ライブ — specimen.js（ライセンスファイル付き）を作成し、ピースをその人の静的フォルダーにコピーします。テーマごとにポスターを付け、<specimen-icon> スニペットを用意します。これはラスターで、パストレーシングではありません。反射は柔らかくなり、デノイザーはありません。その点を明確に伝えてください。WebGPU が必要で、WebGPU が使えない場合、または動きを減らす設定が有効な場合は、ポスターにフォールバックします。 両方 — デフォルトでは動画を使い、ライブは有効にした場所でのみ重ねて表示します。

その人から一方だけの指定がない限り、両方のテーマをレンダリングします。また、ファイルの保存先も確認してください。指定がなければ、ピースの隣に置きます。確認できる相手がいない場合は、動画、両方のテーマ、ピースの隣を選び、その旨を伝えてください。

サイズ

アイコンの表示サイズに合わせてレンダリングします。動画をピクセル数以上のサイズに引き伸ばすと、輪郭がぼやけ、エンコード設定でも元には戻せません。まずプロジェクト内で、アイコンを配置する CSS またはコンポーネントを確認し、最も幅が広くなるブレークポイントでの幅を調べます。幅がわからない場合に限り、納品方法の確認と同じメッセージで質問してください。

表示幅（CSS px）	--size	動画	テーマあたり
160 以下	384	320 px	約4分
320 以下	768	640 px	約17分
480 以下	1152	960 px	約36分

動画は Retina 画面に対応するため、CSS 幅の少なくとも2倍のサイズが必要です。出力サイズは --size の 5/6 になります。幅をカバーする最初の行を選んでください。幅が480を超える場合は、--size を幅の2.4倍とし、12の倍数に切り上げます。所要時間はサイズの2乗に比例して増えます。ライブの場合、サイズはポスターにのみ適用されます。確認できる相手がおらず、参照できる情報もない場合は768を選び、その旨を伝えてください。

1. コンセプト

concepts.md を読みます。1行ずつ、コンセプトを2つか3つ提案します。

名前。 オブジェクト · 動くもの · アクセントを置く場所 · 仕上げ。

例：

ボルト。 厚みのある、柔らかな面取りを施した稲妻 · 1ループにつき2回、光のチャージが稲妻を伝って流れ、先端にたまる · タイルの下にあるチャージとたまり · 光沢のある本体。

次に、アクセント用のパレットを2つか3つ提案します。アイコンが持つ色は1色とし、相手に選んでもらうか、独自の色を指定してもらいます。

パレット。 シアン #22d3ee（涼しく、技術的な印象） · アンバー #f59e0b（温かみのある、アラート向け） · ニュートラル #a1a1aa（色は一切なし。オブジェクトの仕上げだけで印象を表現します）。

色は相手に決めてもらいます。ブランド、セクション、グリッドに合わせた色を選べるようにします。製品領域（セキュリティなら涼しげな色、アラートなら温かい色、モノクロのグリッドならニュートラル）と、ページ上ですでに隣り合っているアイコンを参考に提案します。相手に知らせずに色を決めてはいけません。パレットは scene.accent を設定し、発光色を変えたい場合は scene.glow も設定します。

相手が選ぶまで待ちます。オブジェクトと動きがすでに決まった状態で来た場合に限り、この手順を省略します。尋ねる相手がいない場合は、シルエットが最も明確なコンセプトを選び、どれを選んだかを伝えます。

優れたコンセプトの条件：

• オブジェクトは1つ、アイデアも1つ。 説明文が必要なコンセプトは、まだコンセプトとして成立していません。
• まずはシルエット。 目を細めて見てください。輪郭だけで何かが伝わらない場合は、オブジェクトを変えます。
• オブジェクトは製品の中で意味を持つ。 認証ならロック、アラートならベルです。concepts.md を参照してください。
• ストーリーを伝える動きは1つだけ。 小さく、ゆっくりと動かします。回転、揺れ、チャージ、脈動などです。一度に3つの動きを加えてはいけません。

2. 最も近いサンプルを読む

examples/ の中からコンセプトに最も近いサンプルを開き、全体を読みます。その構造を踏襲します。scene ブロック、geo.* を使ったジオメトリの構築方法、すべての項が周期的になる update(phase) の書き方を確認します。

3. ピースを書く

インポートなしで、2つのエクスポートを持つ ES モジュールです。

export const scene = {
	accent: '#38bdf8',              // the piece's only colour, always as light (a Tailwind 500 reads well)
	glow: '#7dd3fc',                // optional: the colour of its emission; default is the accent a step lighter
	duration: 8,                    // seconds, 4–12; the loop must not jump
	fit: { scale: 0.9, x: 0, y: 0 },// optical fit into the 58% safe area (section 4)
	lights: { tint: 0.45 },         // optional: accent, rim, under, underFill, floor, tint, strips
};

export function object( ctx ) {
	// build with ctx.mat.*, ctx.geo.*, ctx.texture()
	return { mesh, update( phase ) { /* phase runs 0 → 1 once per loop */ } };
}

ctx

キー	説明
THREE	バンドルの three インスタンスです。ピースから three をインポートすることはありません
mat	以下のマテリアルロールです。現在のテーマに応じて解決されます
geo.roundedRect(shape, w, h, r)	Shape または Path（穴用）に角丸長方形を作成します。w、h は半寸法です
geo.bevelExtrude(shape, { depth, bevel, segments, curveSegments })	形状を柔らかく丸みのあるエッジで押し出します。z = 0 を中心に配置します
geo.lathe(profile, segments)	[x, y] のペアからなるプロファイルを +Y を軸に回転させます
geo.planarUV(geometry, w, h)	動的テクスチャ用に、[-w, w] × [-h, h] にわたる uv 0..1 を設定します
texture(w, h)	1つの動的テクスチャです。{ tex, draw(fn(u, v) → [r, g, b]) }。tex をロールの emissiveMap として渡し、update で draw を呼び出します。2回目の呼び出しは例外になります。パストレーサーはオブジェクトごとに動的テクスチャを1つだけ保持します。詳細は後述します
gradient(stops, { srgb })	静的な垂直グラデーションです。stops は [t, css colour] の形式で、上端が (0)、下端が (1) です。炎や軌跡に使用します
accent, glow	テクスチャの draw で使う2色です。THREE.Color として渡されます
theme	読み取り専用の 'dark' または 'light' です。最後の手段として使います
TAU, bump(x, c, w), smoothstep(x, a, b)	アニメーション用ヘルパーです。bump はガウス関数 exp(-((x − c) / w)²) で、c では 1、2w を超えるとほぼ 0（厳密に 0 にはなりません）です。smoothstep は a から b の間で 0 → 1 に増加します

空間とサイズ

タイルは 2 × 2 単位で、原点を中心にカメラに正対しています（+x が右、+y が上、+z がカメラ方向）。セーフボックスは 1.16 単位四方（タイルの 58%）で、y = +0.04 を中心とします。オブジェクトは幅約 1.0～1.3 単位、高さは最大約 1.6 単位とし、独自の原点を中心に z ≈ 0.45 に配置してください。サンプルは fit.scale が 0.8～0.9 の場合、このサイズです。

scene.fit はオブジェクトをグループでラップします。scale はワールド原点を中心にオブジェクトを拡大縮小し（再センタリングはしません）、x と y はワールド単位で移動します（y: -0.08 はタイルを 4% 下に移動します）。オブジェクトのセンタリングは行われません。シート上で中心からずれている場合は、まずジオメトリを中央に配置し（geometry.center() を使うか、グループ内でパーツを移動します）、その後 fit を調整してください。

64 px で厚みが分かるようにするには、チューブとロッドの半径を 0.12 以上、ベベルを 0.05 以上にします。キーライトは右上にあるソフトボックスなので、rotation.y を負の値（約 −0.3）にすると、オブジェクトの右側がカメラに向き、ベベルに光が当たります。

ダイナミックテクスチャ

draw(fn) はテクセルごとに一度 fn(u, v) を呼び出します。テクスチャ上の u と v は 0..1 の範囲です（v = 0 は先頭の行です）。テクスチャはメッシュ自身の UV を通して読み取られます。押し出し形状と平面形状には geo.planarUV(geometry, w, h) が必要です。これは v = 0 を下（y = −h）、u = 0 を左に割り当てます。ラテhe、チューブ、球体にはすでに UV が設定されています（TubeGeometry の u はパスに沿って進みます）。線形色を 0..1 の範囲で返してください。値はクランプされ、emissiveIntensity（ボルトでは 3 を使用）が値をスケーリングします。glow.r * k, glow.g * k, glow.b * k を k が 0..1 の範囲になるように使い、本体を黒く保つ部分には暗いベース（k ≈ 0）を設定してください。パスに沿った帯には texture(256, 16)、面には 128 × 128 で十分です。draw はフレームごとに CPU 上で実行されます。

マテリアルの役割

すべてのマテリアルは mat.* から取得します。マテリアルを自分で生成しないでください（new THREE.MeshStandardMaterial(…) は検証に失敗します）。手作成のマテリアルは色が 1 つだけで、ライトテーマには別の色が必要です。

役割	ダーク	ライト	用途
mat.body(o)	光沢のある黒	白い釉薬仕上げのセラミック	オブジェクトの主要部分
mat.chrome(o)	クローム	クローム	リング、バンド、ヒンジ、シャックル
mat.glass(o)	ダークガラス	白いコアを覆う透明ガラス	ダイス、レンズ、スクリーン
mat.inlay(o)	黒より一段明るい黒	パールグレー	本体上の隆起した細部
mat.glow(k, o)	発光色で発光	発光色を表面色にし、かすかに発光	バッジ、鍵穴、先端のビーズ。小さな発光パーツにのみ使い、主要部分には使わない
mat.light(k, o)	温かみのある白い光	温かみのある、かすかな光	窓、舷窓、炎

o で上書きできるのは物理的な値のみです。対象は finish、finishRepeat、roughness、metalness、clearcoat、normalMap、side、transparent、depthWrite、emissiveMap、alphaMap、emissiveIntensity です。色（color、emissive など）を渡すとエラーになります。色はテーマによって決まります。emissiveMap にダイナミックテクスチャを指定すると、ダークテーマでは発光し、ライトテーマでは白いセラミック上の顔料になります。そのため、同じ draw を両方のテーマで使えます。ライトテーマでアクセントが表面色として現れるのは mat.glow のパーツだけなので、小さく保ちます。たとえば、バッジ、ビーズ、鍵穴などです。

仕上げ

すべてのロールに表面仕上げを指定します：mat.body({ finish: 'brushed', finishRepeat: 5 })。仕上げによって物理的な値（テクスチャ付きのものでは細かな静的マップも）が設定され、ロールの色はそのまま保たれるため、どちらのテーマでも機能します。パーツ側で指定した値は、仕上げの値より優先されます。

仕上げ	光の当たり方	適した場所
gloss	クリアコートの下に鏡があるような仕上がりです。スタジオのライトストリップがくっきり映り込みます	漆塗りのように見せたい本体
matte	反射がなく、形状に沿った柔らかな陰影だけが付きます	スカート、コア、控えめに見せたいパーツ
brushed	細い筋の入った金属です。ハイライトが筋に沿って伸び、筋状になります	プレート、フレーム、カラー、ロックの本体
perforated	丸い穴が格子状に並ぶ金属で、それぞれの穴に光がきらめきます	グリル、キーキャップのプレート、スピーカーの前面
speckle	石やラメ塗装のような、まばらな明るいきらめきのある粗い表面です	キャップ、キートップ、ベルの本体

finishRepeat は UV 単位あたりのタイル数です（デフォルトは 10）。押し出し形状の UV はシーン単位なので、サイズにかかわらず間隔は同じです。ラテとチューブの UV は 0..1 なので、小さめの数値（3～5）が適しています。細かな仕上げは素材らしく見え、粗い仕上げはプリントのように見えます（ブラッシュの筋が広すぎると木目のように見えます）。

くっきりした線を描く 2 本の細いライトストリップは、scene.lights.strips（0～1、デフォルトは 1）で強さを調整できます。オブジェクトの回転中に細かなベベルがストリップを横切ると、明るさを下げてください。反射が 1 ピクセルより細くなり、フレームごとにちらついて見えます。ボルトでは strips: 0 を使います。

validate.mjs はソースをテキストとして読み込むため、コメントに …Material( があるだけでも materials で失敗します。

制作ルール

• オブジェクトはひとつ、アイデアもひとつ。 別のオブジェクト、プロップ、テキストは追加しません。
• まずシルエットです。 64 px で判別できなければ、判別できないのと同じです。
• どのアイコンにも、磨き上げられた光を。 スタジオには幅広のソフトボックスと、細く硬い光を出すストリップが 2 本あります。ストリップはベベルや縁に沿って、くっきりした光の線を描きます。アイコンには少なくとも 2 種類の仕上げを使い、光の線の表情を変えてください（マットなスカートの上に光沢のあるトップ、スペックル仕上げの本体を囲むブラッシュ仕上げのフレームなど）。アイコンは輪郭だけでなく、表面が光をどう受けるかによって認識できるようにします。
• アクセントカラーは光としてのみ使います。 本体は黒（ダーク）または白（ライト）のままにします。アクセントは発光や、タイルの下と縁にできる光だまりとして表現します。表面をアクセントカラーで塗ることはできません。
• 58% の枠内に収めます。 実体部分はセーフエリア内に置き、中央より少し上に配置し、タイルの端から 4% 以内には決して近づけません。配置にはオブジェクト自体の位置ではなく、scene.fit を使います。
• 途切れずにループさせます。 update の各項は、整数倍音を使った phase · TAU の関数にするか、ループの両端で 0 になる smoothstep のエンベロープにします。phase 1 の見た目は phase 0 と完全に同じでなければなりません。
• 光はタイル内に収めます。 タイルの端からはみ出すグローやハローは検証に失敗します。
• runtime/ は編集しないでください。

4. シート化 → 確認 → 修正

node <skill>/sheet.mjs <piece...> [--frames 0,60,120,180] [--guide] [--pt] [--out sheet.png]

フレーム 0、60、120、180（または --frames）を 256 px のセルとしてラスターレンダリングします。各パーツについて、ダークの行とライトの行がひとつずつ並び、--guide を指定すると 58% のセーフボックスが紫色で描画されます。--pt を指定すると、各行に 5 つ目のセルが追加されます。フレーム 0 をパストレーシングし、デノイズしたものです。ラスターレンダリングはパーツごとに数秒かかり、--pt を指定するとパーツごとに約 30 秒追加されます。比較する例を自分のパーツの後に指定すると、行ごとに比較できます。

PNG を確認してください。シルエットが判別できること、すべてのフレームで実体部分が枠内に収まっていること、ライトの行でもダークの行と同じように見えること（白地でもグローが見え、灰色で濁っていないこと）、フレーム間で動きが見えることを確認します。例の隣に並べても遜色ない仕上がりになるまで修正と確認を繰り返してください。フルレンダリングの前に、少なくとも一度は --pt を実行してください。ラスターレンダリングのセルは最終結果より明るいため、ラスターレンダリングでは見えていた黒いパーツが、パストレーシング後には暗いタイルに沈んでしまうことがあります。256 px で細部を確認するには、作業用ディレクトリに使い捨てのコピーを作り、fit.scale を大きくしてシート化してください。本人のプロジェクト内では行わないでください。

5. 検証

node <skill>/validate.mjs <name>.specimen.js

失敗したルールとその理由を表示し、失敗がある場合は終了コード 1 で終了します。ok と表示されるまで繰り返してください。

ルール	失敗する条件
contract	scene または object のエクスポートがない、accent が 16 進数カラーではない、duration が 4～12 の範囲外、object() が例外をスローするか mesh を返さない
materials	ソース内に …Material( コンストラクターがある
seam	位相 0 と位相 1 のラスターの差が、平均で 0.5（0～255）を超える
fit	不透明なメッシュ（炎やハローなど）は除外し、不透明な mat.glow のパーツは含めた、オブジェクトのシルエットの中央 90% を占めるソリッド部分がセーフボックスからタイルの 3% を超えてはみ出す、またはシルエット全体がタイルの端から 4% 以内に入る。ループの 0、¼、½、¾ の各フレームで判定します
light-in-tile	タイル外のものがページより 2/255 を超えて明るい
one-texture	texture() が 2 回呼び出される

6. レンダリングして引き渡す

開始前に、§0 のサイズ表に基づいて所要時間を伝えてください。最近の Mac では --size 768 の場合、1 フレームあたり約 4 秒かかるため、8 秒のループ（240 フレーム）はテーマごとに約 17 分、両方で約 35 分です。ライブ版ではポスター 2 枚だけをレンダリングするため、1 分ほどです。動画のレンダリングはフォアグラウンドのコマンドタイムアウトを超えるため、バックグラウンドで実行し、進捗行（30 フレームごとに表示される 30/240 · 666 s left）を監視して、ファイルが表示されるまで待ってください。フォアグラウンドで実行すると、タイムアウトによって途中で終了するため、絶対に実行しないでください。

node <skill>/render.mjs <name>.specimen.js --out public/icons --size 768            # video, both themes
node <skill>/render.mjs <name>.specimen.js --out public/icons --live     # live
node <skill>/render.mjs <name>.specimen.js --out public/icons --live --video   # both

--themes dark を指定すると、1 つのテーマをレンダリングします。ファイル名とサイズ、スニペットが表示されます。スニペット内のパスは、フォルダーが /<folder name> で配信されることを前提としています。実際の配信先に合わせてプレフィックスを設定してください。

ファイルとスニペットを引き渡してから、サイトが OS のテーマに従うのか、切り替え機能（[data-theme]）があるのかを尋ねてください。表示された動画のスニペットは OS のテーマに従います。

<video autoplay muted loop playsinline poster="/icons/bolt-dark-poster.jpg">
  <source src="/icons/bolt-light.webm" type="video/webm" media="(prefers-color-scheme: light)">
  <source src="/icons/bolt-light.mp4" type="video/mp4" media="(prefers-color-scheme: light)">
  <source src="/icons/bolt-dark.webm" type="video/webm">
  <source src="/icons/bolt-dark.mp4" type="video/mp4">
</video>

サイトに [data-theme] の切り替え機能がある場合は、2 つの動画と、表示する動画を選ぶ CSS を渡してください。

<video class="specimen-dark" autoplay muted loop playsinline poster="/icons/bolt-dark-poster.jpg">
  <source src="/icons/bolt-dark.webm" type="video/webm">
  <source src="/icons/bolt-dark.mp4" type="video/mp4">
</video>
<video class="specimen-light" autoplay muted loop playsinline poster="/icons/bolt-light-poster.jpg">
  <source src="/icons/bolt-light.webm" type="video/webm">
  <source src="/icons/bolt-light.mp4" type="video/mp4">
</video>
<style>
  .specimen-light { display: none; }
  [data-theme="light"] .specimen-light { display: block; }
  [data-theme="light"] .specimen-dark { display: none; }
</style>

ライブ版：

<specimen-icon src="/icons/bolt.specimen.js" poster="/icons/bolt-dark-poster.jpg" poster-light="/icons/bolt-light-poster.jpg"></specimen-icon>
<script type="module" src="/icons/specimen.js"></script>

<specimen-icon> は、theme="dark|light" が指定されていない限り prefers-color-scheme に従います（[data-theme] を使うサイトでは、切り替え機能から値を設定してください）。画面外では一時停止し、WebGPU がない場合や動きを抑える設定が有効な場合はポスターを表示し続けます。ライトテーマでは poster-light、それ以外では poster を使います。CSS の width でサイズを指定してください（正方形のままで、既定のサイズは 160 px です）。

タイル外は、すべてのフレームでページの色（黒または白）と完全に一致します。別の色のセクションに配置する場合は、なじませてください。ダークテーマでは mix-blend-mode: screen、ライトテーマでは multiply を使います。

7. 基準

• examples/rocket.specimen.js — 右上に飛ぶロケットです。1ループにつき1回バレルロールし、gradient の炎がタイルを照らします。クロームの帯とノズルに加え、mat.light の舷窓があります。
• examples/bolt.specimen.js — 厚みのある面取り済みのボルトです。唯一の動的テクスチャでボルトに沿ってチャージを走らせ、先端に集めます。
• examples/bell.specimen.js — 1ループにつき2回鳴る、回転成形されたベルです。クロームの舌が遅れて動きます。鳴ると mat.glow のバッジが光ります。
• examples/lock.specimen.js — 1ループにつき1回、クロームのつるが持ち上がって開く南京錠です。同時に鍵穴が光ります。fit.y によって、持ち上がったつるが上端からはみ出さないようにします。
• examples/chip.specimen.js — 四方すべてにクロームのピンを備えたチップです。mat.glass のダイでは、動的テクスチャに描画された四角い光のパルスが、1ループにつき2回、外側へ波紋のように広がります。
• examples/cube.specimen.js — 無彩色のパズルキューブです。26個のキューブレットを使い、すべてのステッカーは同じ黒（ライト時は白）の異なる仕上げになっています。各層は1ループにつき4回、カチッと90度回転し、最後に完成状態に戻ります。中立的な配色でも、仕上げだけで見分けられます。
• examples/key.specimen.js — 穴あきクロームプレート上のキーボードキーキャップです。つや消しのスカートに斑点模様の天面、光るリターン矢印の刻印を備えています。下のライトが強く光る中、1ループにつき2回、弾むように押し下げられます。
• examples/gears.specimen.js — 噛み合う2つのクロームギアです。大きい方には軽量化穴があり、ハブが強く光る中、1ループにつき4回、歯を1つずつ進めます。形状が対称な回転パーツにはプレーンなクロームを使います。テクスチャ仕上げにすると回転に合わせて模様も回り、ループが崩れるためです。

8. 禁止事項

• runtime/ は編集しないでください。また、変更した specimen.js のコピーを同梱しないでください。
• 作品内でマテリアルを作成したり、色を選んだりしないでください。すべての表面には mat.* を使ってください。
• 作品内で texture() を2回呼び出したり、何かをインポートしたりしないでください。
• npm install を実行したり、依存関係を追加したり、ユーザーのプロジェクト内に独自のフォルダーを作成したりしないでください。
• ライブレンダリングを「パストレーシング」と呼ばないでください。ライブレンダリングはラスタライズです。
• validate.mjs が ok を出力する前にレンダリングしないでください。