ワークフロー

WebGL material ワークフロー

Three.js、custom WebGL renderers、browser-based material previews 向けに、軽量で予測しやすい procedural maps を使います。

書き出し先

チャンネル設定

Three.js の visible base color texture には sRGB color space を使い、custom shaders では同等の color conversion を行います。

normal maps は data textures として sample し、texture を rebake せず material 側で normal scale を調整します。

roughness と AO は linear のままにします。Three.js で AO を使う場合は UV2 または同等の secondary UV 処理も必要です。

seamless surfaces では repeat wrapping を有効にし、同じ export を複数の asset sizes に使えるよう code で repeat values を設定します。

素早い carrier material が必要なら GLB を使います。renderer が shader と texture binding を管理するなら individual PNG maps を使います。

color maps に sRGB を割り当て、roughness、normal、height、AO は linear data textures として扱います。

seamless surfaces では wrapS と wrapT を repeat にし、material repeat values または shader uniforms で scale を制御します。

production で大きな map sets を使う前に、target device で resolution、compression、channel 数を確認します。

Three.js で AO が見えない場合、geometry が material に必要な UV set を持つか確認します。

base color を linear として扱うと暗く見え、data maps を sRGB として扱うと roughness や normal response が崩れます。

browser scenes は texture memory に敏感です。camera distance に耐える最小 resolution を使います。

素早い material review には便利です。production renderers では individual maps の方が compression、loading、shader inputs を制御しやすいことが多いです。

できます。texture wrapping mode を repeat にし、material または texture instance で repeat scale を制御します。