🐷

A-Frameでアウトラインを描画する

2022/09/30に公開

WebGL

aframe

8th Wall

tech

概要

Webで3Dを描画できるライブラリであるA-Frameでアウトラインを描画する方法を紹介します
A-Frameですので、8th Wallなどでも同じ方法で描画することができます

結果

ソースコード

<html>
  <head>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9">
        <a-box 
          scale="1.05 1.05 1.05"
          material="shader: flat;color: black;side: back">
        </a-box>
      </a-box>
      <a-sphere position="0 1.25 -5" color="#EF2D5E">
        <a-sphere 
          scale="1.05 1.05 1.05"
          material="shader: flat;color: black;side: back">
        </a-sphere>
      </a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D">
        <a-cylinder 
          radius="0.5" height="1.5" 
          scale="1.05 1.05 1.05"
          material="shader: flat;color: black;side: back">
        </a-cylinder>
      </a-cylinder>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

解説

やっていることは簡単で

対象のモデルと同じモデルをアウトライン用モデルとして同じ位置に設置する
アウトライン用モデルを少し大きくする
flat Shaderで色を黒くする
裏面を描画する

意外とこれだけでも見られるクオリティのアウトラインの描画ができます

原理についてはこちらの記事が詳しいです

概要

結果

ソースコード

解説

Discussion