【model-viewer】pbrMetallicRoughness APIの解説

こんにちは、もしくはこんばんは。シロです！

model-viewerは、Web上で簡単に3Dモデルを表示できるJavaScriptライブラリです。

model-viewerのpbrMetallicRoughnessというAPIを使えば、Web上に表示した3Dモデルのマテリアルの色やメタリック、粗さを動的に調整できます。

しかし、残念ながら具体的な使いかたのドキュメントが少なく、調べるのに苦労したので自分でまとめることにしました！

pbrMetallicRoughnessとは？

pbrMetallicRoughness APIは、model-viewer で 3D モデルのマテリアル設定を変更するための API の1つです。

PBRに基づいたレンダリングを行うためのマテリアル設定を行うことができます。

pbrMetallicRoughness は、モデルのマテリアルを表すオブジェクトで、model-viewer エレメントの model プロパティからアクセスできます。

この API を使用することで、モデルの基本的なマテリアル設定の変更が可能になります。

例えば、モデルの色を変更したり、金属質の設定を変更したり、表面のラフネスを調整したりできます。これにより、よりリアルな 3D モデルを作成することができます。

PBRとは

Physically Based Rendering(物理ベースレンダリング)の略で、現実の光の挙動を数学的にモデル化することで、CGでのレンダリングの品質を向上させるための手法です。

変数

pbrMetallicRoughnessで扱える変数には以下のものがあります。

baseColorFactor

ベースカラーの色情報をRGBA形式で表した配列です。RGBA値は、0〜1の範囲内で指定でます。

たとえば、白色を指定する場合、RGBA値は[1, 1, 1, 1]になります。黒色を指定する場合、RGBA値は[ 0, 0, 0, 1]になります。

modelプロパティには3Dモデルに張り付けたマテリアルの分だけmaterials配列にマテリアルデータが格納されています。この例では、各マテリアルデータの名前とベースカラーを順にコンソール出力しています。

const modelViewer = document.querySelector('model-viewer');
modelViewer.model.materials.forEach(material => {
  console.log(material.name);
  console.log(material.pbrMetallicRoughness.baseColorFactor);
});

あわせて読みたい

3Dコンテンツの幅が広がる！model-viewerでマテリアルの色を変える方法 こんにちは、もしくはこんばんは。シロです！ model-viewerは、Web上で簡単に3Dモデルを表示できるJavaScriptライブラリです。 model-viewerには多くのオプションが用意…

metallicFactor

物体のメタリック度を表す0から1までの数値。1に近いと物体は金属的な光沢を持ち、値が0近いと非金属的なマットな質感を持ちます。

各マテリアルデータの名前とメタリック度を順にコンソール出力しています。

const modelViewer = document.querySelector('model-viewer');
modelViewer.model.materials.forEach(material => {
  console.log(material.name);
  console.log(material.pbrMetallicRoughness.metallicFactor);
});

あわせて読みたい

3Dコンテンツの幅が広がる！model-viewerでマテリアルの金属質と粗さを変える方法 こんにちは、もしくはこんばんは。シロです！ model-viewerは、Web上で簡単に3Dモデルを表示できるJavaScriptライブラリです。 model-viewerには多くのオプションが用意…

roughnessFactor

物体のラフネス(粗さ)を表す0から1までの数値。この値が低いほど表面は滑らかで、高いほど表面は粗くなります。具体的には、0に近い値は鏡面反射に近く、1に近い値は拡散反射に近くなります。

各マテリアルデータの名前とラフネスを順にコンソール出力しています。

const modelViewer = document.querySelector('model-viewer');
modelViewer.model.materials.forEach(material => {
  console.log(material.name);
  console.log(material.pbrMetallicRoughness.roughnessFactor);
});

あわせて読みたい

3Dコンテンツの幅が広がる！model-viewerでマテリアルの金属質と粗さを変える方法 こんにちは、もしくはこんばんは。シロです！ model-viewerは、Web上で簡単に3Dモデルを表示できるJavaScriptライブラリです。 model-viewerには多くのオプションが用意…

baseColorTexture

ベースカラーのテクスチャーを表すオブジェクト。

Shadingで設定したテクスチャの情報がセットされています。

各マテリアルデータにセットしたベースカラーテクスチャ情報を順にコンソール出力しています。

const modelViewer = document.querySelector('model-viewer');
modelViewer.model.materials.forEach(material => {
  console.log(material.name);
  console.log(material.pbrMetallicRoughness.baseColorTexture);
});

metallicRoughnessTexture

メタリック度とラフネスを合わせたテクスチャの情報。

各マテリアルデータにセットしたメタリックとラフネスのテクスチャ情報を順にコンソール出力しています。

const modelViewer = document.querySelector('model-viewer');
modelViewer.model.materials.forEach(material => {
  console.log(material.name);
  console.log(material.pbrMetallicRoughness.metallicRoughnessTexture);
});

関数

model-viewerのpbrMetallicRoughnessで扱えるメソッドは以下の通りです。

setBaseColorFactor()

baseColorFactorプロパティを設定するためのメソッドです。このメソッドを使用すると、3Dモデルのベースカラーの色を設定することができます。

このメソッドは、4つの値を持つ配列を引数として受け取ります。配列の最初の3つの値はRGB値で、4つ目の値はアルファ値です。各値は0〜1の範囲で指定されます。

以下は、setBaseColorFactorを使用して基本カラーを赤色に設定する例です。

ベースカラーを赤色に設定します。最初の3つの値[1, 0, 0]は、赤色のRGB値を表し、最後の値1は、アルファ値を表します。

const modelViewer = document.querySelector('model-viewer');
modelViewer.model.materials.forEach(material => {
  material.pbrMetallicRoughness.setBaseColorFactor([1, 0, 0, 1])
});

また、16進数のカラーコードも使用することができます。16進数カラーコードを使用する場合は、"#F00"のように、先頭に#をつけた文字列である必要があります。

あわせて読みたい

3Dコンテンツの幅が広がる！model-viewerでマテリアルの色を変える方法 こんにちは、もしくはこんばんは。シロです！ model-viewerは、Web上で簡単に3Dモデルを表示できるJavaScriptライブラリです。 model-viewerには多くのオプションが用意…

setMetallicFactor()

metallicFactorプロパティを設定するためのメソッドです。このメソッドを使用すると、3Dモデルのメタリック度合いを調整することができます。

このメソッドは、0.0から1.0の範囲の値を引数として受け取ります。値が低いほど表面の反射率はよりマットになり、値が高いほど、表面の反射率はよりメタリックになります。

この値を変更することによって、金属やプラスチックなどの素材の見た目を変更することができます。

以下は、setMetallicFactorを使用してメタリック度を調整する例です。

メタリックを0.5に調整します。

const modelViewer = document.querySelector('model-viewer');
modelViewer.model.materials.forEach(material => {
  material.pbrMetallicRoughness.setMetallicFactor(0.5)
});

あわせて読みたい

3Dコンテンツの幅が広がる！model-viewerでマテリアルの金属質と粗さを変える方法 こんにちは、もしくはこんばんは。シロです！ model-viewerは、Web上で簡単に3Dモデルを表示できるJavaScriptライブラリです。 model-viewerには多くのオプションが用意…

setRoughnessFactor()

roughnessFactorプロパティを設定するためのメソッドです。このメソッドを使用すると、3Dモデルの表面の粗さを調整することができます。

このメソッドは、0.0から1.0の範囲の値を引数として受け取ります。値が低いほど表面が滑らかになり、値が高いほど表面が粗くなります。

以下は、setRoughnessFactorを使用して表面の粗さを調整する例です。

粗さを0.5に調整します。

const modelViewer = document.querySelector('model-viewer');
modelViewer.model.materials.forEach(material => {
  material.pbrMetallicRoughness.setRoughnessFactor(0.5)
});

あわせて読みたい

3Dコンテンツの幅が広がる！model-viewerでマテリアルの金属質と粗さを変える方法 こんにちは、もしくはこんばんは。シロです！ model-viewerは、Web上で簡単に3Dモデルを表示できるJavaScriptライブラリです。 model-viewerには多くのオプションが用意…

まとめ

この記事では、model-viewerで3Dモデルのマテリアル設定を変更するためのAPIであるpbrMetallicRoughness について解説しました。

model-viewerは複雑なマテリアル設定はできない代わりに、簡単に扱えるAPIを用意しているという印象です。

マテリアル設定を変更できれば、3Dコンテンツの幅がより広がります。

ぜひこの記事を参考にして、より魅力的なコンテンツを自分のウェブサイトやブログに追加してみてください！

以上、「model-viewer pbrMetallicRoughness APIの解説」でした。