1 はじめに スペースリーでエンジニアをしている長谷川です。 最近は3DのWebアプリの開発を担当していて、弊社でリリースしている「パノラマ変換3Dプレイヤー」のコンテンツ作成機能などを開発しています。 3DのWebアプリを開発する際には「React/Vue × WebGL系ライブラリ」という構成が代表的なケースの1つであり、弊社でもその構成を選択しました。 ところが、3D Webアプリはサービスの数としては多くないので保守運用まで考慮した設計ノウハウはまだまだ十分に共有されてはおらず、開発を進めるにあたって以下のような懸念点がありました。（詳細は次章） 「宣言的なReact/VueのWebアプリ」と「命令的なWebGL系ライブラリ」というスタイルの違うコードが混ざることでそれぞれの責任分担が曖昧になりやすい 「WebGL系ライブラリを用いた3Dアプリ」の保守運用を考慮した設計に関するノウ
WebGLとCanvas2Dを併用できないかな〜とぼんやり考えてたら、以下のAPIを見つけました。 ・Canvasリファレンス なんと第1引数のimageにimg要素、canvas要素、video要素が指定できるとっ！ これで描画して更新すれば、canvas2DにWebGL描画できそうなのでやってみました。 WebGL描画をCanvas2Dに描画 ソースはこんな感じです。 ここには書いてないですが、別途WebGLのcanvasをgetElementByIdし、変数canvasを渡しておきdrawImageの第1引数に指定します // WebGLのcanvasとは別に、2D用のcanvasタグをHTML側に作って参照する var can_2d = document.getElementById("2dcanvas"); var ctx_2d = can_2d.getContext("2d")
原神のホームページで、MMDファイルを公開してくれました。太っ腹！ 原神のキャンペーン公式サイトの紹介記事 https://www.gamespark.jp/article/2020/10/08/102819.html なので、これを機会に、JavascriptでMMDファイルを表示するビューアページを作ってみようと思います。 原神のキャンペーン公式サイト(中国語) http://ys.biligame.com/gczj/ ここから、MMDファイルをダウンロードします。 ※現在は以下からダウンロードできます。 https://genshin.mihoyo.com/ja/news/detail/5885 MMDファイルの表示には、three.jsにあるMMDLoaderを使いました。 mrdoob/three.js https://github.com/mrdoob/three.js という
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
