#はじめに
はじめまして、最近A-Frameがマイブームです。
むちゃくちゃ簡単に3D､VRが出来ることに感動するのですが、
如何せん日本語の表示が未対応なのがつらいところです。
現状は2つほど表示する方法がありますが、どちらも十全ではないので、
別の方法をjavascriptで実装してみました。
#既存の方法
既存の方法は以下の2つとその欠点
- フォントデータを変換して使う
- 欠点：あらかじめ使用する文字すべてを準備する必要がある。
- HTML Shaderを使う
- 欠点：透過できない。htmlのbackgroundを透明にすると、3D空間ではなくcanvasを透過してしまう。(demo参照)
別の方法
ざっくりした方法
- 対象の日本語テキストを生成したcanvasに描画
- canvas情報をbase64に変換
- src=base64のa-imageを挿入
コード
今回の方法と、参考にHTMLShaderを使った方法を実装
ざっくり実装なのでいろいろ適当
<html>
<head>
<meta charset="utf-8"/>
<title>aframeMultiByte</title>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="./js/aframe-html-shader.min.js"></script>
<script src="./js/html2canvas.min.js"></script>
<style>
.target{
width:500px;
height:100px;
font-size:20pt;
background:rgba(0,0,0,0);
}
</style>
</head>
<body>
<div id="target1" class="target">
<p>旧.こんにちは世界(HTML Shader)🌝</p>
</div>
<a-scene vr-mode-ui="enabled: true" style="position:fixed;top:0;">
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
<a-plane position="-1.5 2 -1" width="2" height="0.5" material="shader:html;target: #target1;"></a-plane>
<a-entity mb-text position="1.5 1.5 -1" data-text="新.こんにちは世界(script)🌝"></a-entity>
</a-scene>
</body>
<script>
function aframeMutlByte(){
document.querySelectorAll('[mb-text]:empty').forEach(mb_text=>{
console.log(mb_text.dataset.text)
const text =mb_text.dataset.text
const text_cnt = text.length
const width = text_cnt*1.4
const height= 1.6
let cvs = document.createElement('canvas')
let ctx = cvs.getContext('2d')
cvs.width = width*100
cvs.height = height*100
ctx.fillStyle = "rgb(0, 0, 0)"
ctx.font = '100pt Arial'
ctx.fillText(text,0,125)
const base64 = cvs.toDataURL("image/png")
mb_text.innerHTML=`<a-image scale="${(width)/10} ${height/10} 1" src="${base64}"></a-image>`
})
}
aframeMutlByte()
</script>
</html>
結果
日本語だけでなく顔文字も透過した状態で表示される。
最後に
作りこめば、フォントの指定とか、改行とかオプションをいろいろ実装できそう。
ざっくり作ったので、VR端末での動作確認などは要検証
追記(2020-07-18)
VRモードの設定つけ忘れてたのでコード修正
一応Android9のChrome、iOS13のsafari、OculusQuestで大丈夫だったので、
おおよそ使えそう。
#参考サイト
A-Frame: Hello WebVR
A-Frameで日本語を表示したい
A-FrameとHTML Shaderで美しい日本語テキストを表示する方法