WebGLの3D空間上に配置した板ポリゴンにWebページを描画させました。

日差しが強くなり始め、朝も日陰が減り始めた時期となりましたが皆様どうお過ごしでしょうか？
チームタンドリーの北山です。

本日はチーム課題で作成した既存の課題に対して、追加の機能を実装する運びとなりました。

私はチーム課題はWebGLで作成しました。

今回は板ポリゴンにWebページを表示する機能を実装しました。

流れとしては、WebGL上の板ポリゴンに対して、スクリプト側で処理を行ってマテリアルを付与します。
次にそのマテリアルに対して、引き続きスクリプトの処理を行って、matrix3dなどの3Dに関するCSSの情報や、Webページを引用する為のiframeなどのhtmlタグの情報も付与していき、Webページを板ポリゴンへ描画するというという形です。

実装後のイメージは以下の画像の通りとなります。

板ポリゴンなのでテレビの3Dモデルの前に配置して活用する事ができました。

また、スクリプト側で用意したピクセル数の変数の値を変更する事で板ポリゴンに表示するWebページの表示域を変更する事ができます。

※左上のロゴの大きさが異なります。

3D空間上のポリゴンに対してWeb上のページを表示する事ができる点は魅力ですが、iframeで呼び出している為、iframeでの表示を遮断しているサイトなどは表示する事が出来ません。

この点については今後、技術的に可能なのか否か興味がある為、iframeの学習含め、調べていきたいと思います。

ここまでご一読いただきまして誠にありがとうございました。
次回もご一読いただけますと幸いです。

現在

株式会社チョモランマ

株式会社シェルパ

3Dmodeljapan株式会社

ではスタッフを大募集しております！！

UNITY、Unreal Engine4、AI、プログラミングや建築パースに興味がある方！

ぜひご応募下さい！！

初心者の方、未経験の方やインターンを受けてみたい方々でも大歓迎です！！

〔企画運営〕株式会社シェルパ　

公式HP　https://sherpa-cg.com/

〒810-0042

福岡県福岡市中央区赤坂1丁目13-10赤坂有楽ビル7F

tel 092-717-6800 / fax092-717-6801