Zenn
🙌

AR.jsでWebARしてみる(8) Canvas Textures

2020/10/12に公開
HTML
JavaScript
aframe
WebAR
tech

はじめに

WebARで分かったことメモしていく

参考

※Canvas Textures (canvas.html)を勉強する

デモ

  • 以下の環境で動作を確認
    • iOS 13.7 Safari
    • Android 9 Chrome
    • Windows10 Firefox 81.0.1

ソース

参考で紹介したサイトのCanvas Textures (canvas.html)のソース

<!doctype HTML>
<html>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script src="js/aframe.min.js"></script>
<script src="js/aframe-ar.js"></script>
<body style="margin: 0px; overflow: hidden;">
<script>
// attach this component to the up
AFRAME.registerComponent('canvas-texture', {
	init: function()
	{
		this.canvas = document.querySelector("#myCanvas");
		this.canvas.width = 512;
		this.canvas.height = 512;
		this.context = this.canvas.getContext('2d');
		this.x = 200;
		this.y = 100;
		this.dx = 5;
		this.dy = 3;
	},
	tick: function(t, dt)
	{
		this.x += this.dx;
		this.y += this.dy;
		let w = 50;
		let h = 50;
		if (this.x > 512-w || this.x < 0)
			this.dx *= -1;
		if (this.y > 512-h || this.y < 0)
			this.dy *= -1;
		// clear canvas
		this.context.fillStyle = "#8888FF";
		this.context.fillRect(0,0, 512,512);
		// draw rectangle
		this.context.fillStyle = "#FF0000";
		this.context.fillRect( this.x, this.y, w, h );
		// signal that image data needs to be updated
		let material = this.el.getObject3D("mesh").material;
		if (!material.map)
			return;
		else
			material.map.needsUpdate = true;
	}
});
</script>

<a-scene embedded vr-mode-ui="enabled: false;" arjs="debugUIEnabled: false;">
    <a-assets>
        <canvas id="myCanvas"></canvas>
    </a-assets>
    <a-marker type="pattern" url="data/hiro.patt">
        <a-box
               position="0 0.5 0" 
               material="src: #myCanvas; transparent: true; opacity: 0.95;"
               canvas-texture>
        </a-box>
    </a-marker>
    <a-entity camera></a-entity>
</a-scene>
</body>
</html>

確認したこと

AFRAME.registerComponentについて

init: function(){ /省略/ } は、1回だけ実行する。初期値を設定するところ。
tick: function(t, dt){ /省略/ } は、無限ループ状態で何回も実行される。アニメーションの処理を書くのに向いてる。引数のdtは、前回tickを実行した後からの差分(ミリ秒)らしい。tickの呼び出しは不定期みたいだが、dtをうまく使えば

tick内の処理について

大半がcanvasタグに対する描画処理が書いてる。canvas全体を#8888FF色で塗りつぶし、小さな四角を#FF0000色で描く、パラパラ漫画。

カスタムしてみた

色とか小さな四角の形が定期的に変わるようにしてみました。

ソースはこれ

<!doctype HTML>
<html>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script src="js/aframe.min.js"></script>
<script src="js/aframe-ar.js"></script>
<body style="margin: 0px; overflow: hidden;">
<script>
// attach this component to the up
AFRAME.registerComponent('canvas-texture', {
	init: function()
	{
		this.canvas = document.querySelector("#myCanvas");
		this.canvas.width = 512;
		this.canvas.height = 512;
		this.context = this.canvas.getContext('2d');
		
		this.x = 200;
		this.y = 100;
		this.dx = 5;
		this.dy = 3;

		this.color1 = "#8888FF";
		this.color2 = "#FF0000";

		this.w = 50;
		this.h = 50;
	},
	tick: function(t, dt)
	{
		this.x += this.dx;
		this.y += this.dy;
		if (this.x > 512-this.w || this.x < 0)
		{
			this.dx *= -1;
			this.color1 = "#8888FF";
			this.color2 = "#FF0000";
			this.w = 50;
			this.h = 80;
		}
		if (this.y > 512-this.h || this.y < 0)
		{
			this.dy *= -1;
			this.color1 = "#FF8877";
			this.color2 = "#99FF22";
			this.w = 80;
			this.h = 50;
		}
		// clear canvas
		this.context.fillStyle = this.color1;
		this.context.fillRect(0,0, 512,512);
		// draw rectangle
		this.context.fillStyle = this.color2;
		this.context.fillRect( this.x, this.y, this.w, this.h );
		// signal that image data needs to be updated
		let material = this.el.getObject3D("mesh").material;
		if (!material.map)
			return;
		else
			material.map.needsUpdate = true;
	}
});
</script>

<a-scene embedded vr-mode-ui="enabled: false;" arjs="debugUIEnabled: false;">
    <a-assets>
        <canvas id="myCanvas"></canvas>
	</a-assets>
    <a-marker type="pattern" url="data/hiro.patt">
        <a-box
               position="0 0.5 0" 
               material="src: #myCanvas; transparent: true; opacity: 0.95;"
               canvas-texture>
        </a-box>
    </a-marker>
    <a-entity camera></a-entity>
</a-scene>
</body>
</html>

追記

応用編:複数の画像ファイルを順番に表示するスクリプトもつくりました。
→ AR.jsでWebARしてみる(8-2) Canvas Texturesで画像ファイルを順番に表示する

Discussion