🐷

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

2022/09/30に公開

概要

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

結果


https://tkada.github.io/a-frame-outline/

ソースコード

<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で色を黒くする
  • 裏面を描画する

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

原理についてはこちらの記事が詳しいです
https://light11.hatenadiary.com/entry/2018/04/10/000006

Discussion