SENKUyouメール_vol028：WebGLで実現！3Dのリッチなウェブ表現
2021/11/30 (Tue) 11:00
WebGLで実現！3Dのリッチなウェブ表現 ＿ vol.028
ウェブサイトでできる表現は年々進化しています。
「近未来的なイメージの、幾何学模様が自動で動く表現」
「サイト上で軽快に動く3Dゲーム」
「クリックやタッチ操作で動くインタラクティブな3Dアニメーション」
のような表現も、より美しく、ウェブサイトの読み込み速度なども大きく損なうことなく、
実現できるようになってきました。
これらを実現するための方法としてWebGLがあります。
■WebGLとは
WebGLはOpenGL ES2.0相当の機能を持つJavaScriptのAPIです。
OpenGLは、たいていの場合C++やJavaなど、それぞれのプラットフォームに合わせてネイティブな言語で記述されます。
WebGLはと言うと、JavaScriptで記述することになります。
ウェブ関係の開発を行っている人が普段から使い慣れているJavaScriptを使って、ブラウザ上でOpenGLのAPI を叩くことができるというのがWebGLの革新的なところだと言えます。
JavaScriptで記述されたWebGLのコードは、最終的にはJavaScriptを解釈しているウェブブラウザによってOpenGLのAPIとして実行されます。
これにより、通常のOpenGLなどに近い環境、具体的にはGPUを利用したレンダリングが行われるため、非常に高速な描画が実現できます。※Windowsの場合は多少異なります。
高速な描画を実感していただくために、サンプルを用意しました。
サンプルでは、3DCG空間内に粒子（パーティクル）を10万個ループで描画しています。
サンプルを開くとページロードを待つことなく、10万個のパーティクルが高速に描画されていると思います。
【描画速度を体感】
https://senku.jp/webgl-sample/index.html?utm_source=mm&utm_medium=email&utm_campaign=mm028
■three.js と WebGL
WebGLはそのまま使うとコードの記述量が増え非常に大変なため、WebGLラッパーライブラリであるthree.jsを使うケースも多いです。
three.jsはMr.doobによって開発されたWebGLコンテンツの実装を助けるライブラリです。
正確には、様々な機能をもっているため必ずしもWebGL専用のライブラリというわけではありませんが、現在はほぼWebGL実装には欠かせない3D ウェブのjQuery的存在となっています。
three.jsを利用すると、難易度的にも実装工数的にもピュアなWebGLより格段に開発者の負担を軽減できます。
また、豊富なサンプルやドキュメントの他、日本語の解説書籍等もいくつか出ています。
【three.js公式サイト】
https://threejs.org/
three.jsを使う上でデメリットらしいデメリットはあまりないですが、あえて無理やりデメリットを挙げると
・three.js の流儀に従う必要がある
・ややファイル容量が大きめ
・バージョンアップに追従するのが大変
・成果物の見た目が似通う
となるかと思います。
以上がWebGLの簡単な説明となります。
先駆では、皆様に少しでもご満足いただけるように技術を追求しております。
是非、お気軽にご相談をお願いいたします。
■━━━━━━━━━━━━━━━━━━■
【お気軽にご質問・ご相談ください】
「こんなことをしたいけれど先駆でお願いできる？」
「〇〇するために、うちの場合はいくらかかる？」
など、ちょっとした疑問・質問でも、プロとして責任もってお応えします。
もちろん、見積提示まで相談料など料金は一切発生しません。
ぜひ、お気軽にお問い合わせください
メールでのご相談：contact@senku.jp
フォームからのご相談：https://senku.jp/contact/?utm_source=mm&utm_medium=email&utm_campaign=mm028
■━━━━━━━━━━━━━━━━━━■
＜Senk you Mail 発行元情報＞
会社名：株式会社先駆
住所：〒193-0835
東京都八王子市千人町2-3-16
Tel：042-669-0669
E-mail：contact@senku.jp
Website：https://senku.jp/?utm_source=mm&utm_medium=email&utm_campaign=mm028
=============================
＜本メールマガジンについて＞
本メールは株式会社先駆の取引があるお客様、
弊社担当と名刺交換をさせていただいたお客様、
弊社へお問い合わせくださいましたお客様などに配信しております。
また、お預かりしております個人情報は、
個人情報保護関連法およびガイドラインに従い、
責任をもって管理致します。
https://senku.jp/privacy-policy/?utm_source=mm&utm_medium=email&utm_campaign=mm028
=============================
配信停止を希望の方はこちらから可能です
https://b.bme.jp/bm/p/f/tf.php?id=senku&task=cancel
=============================
copyright Senku Inc. All rights reserved.
ウェブサイトでできる表現は年々進化しています。
「近未来的なイメージの、幾何学模様が自動で動く表現」
「サイト上で軽快に動く3Dゲーム」
「クリックやタッチ操作で動くインタラクティブな3Dアニメーション」
のような表現も、より美しく、ウェブサイトの読み込み速度なども大きく損なうことなく、
実現できるようになってきました。
これらを実現するための方法としてWebGLがあります。
■WebGLとは
WebGLはOpenGL ES2.0相当の機能を持つJavaScriptのAPIです。
OpenGLは、たいていの場合C++やJavaなど、それぞれのプラットフォームに合わせてネイティブな言語で記述されます。
WebGLはと言うと、JavaScriptで記述することになります。
ウェブ関係の開発を行っている人が普段から使い慣れているJavaScriptを使って、ブラウザ上でOpenGLのAPI を叩くことができるというのがWebGLの革新的なところだと言えます。
JavaScriptで記述されたWebGLのコードは、最終的にはJavaScriptを解釈しているウェブブラウザによってOpenGLのAPIとして実行されます。
これにより、通常のOpenGLなどに近い環境、具体的にはGPUを利用したレンダリングが行われるため、非常に高速な描画が実現できます。※Windowsの場合は多少異なります。
高速な描画を実感していただくために、サンプルを用意しました。
サンプルでは、3DCG空間内に粒子（パーティクル）を10万個ループで描画しています。
サンプルを開くとページロードを待つことなく、10万個のパーティクルが高速に描画されていると思います。
【描画速度を体感】
https://senku.jp/webgl-sample/index.html?utm_source=mm&utm_medium=email&utm_campaign=mm028
■three.js と WebGL
WebGLはそのまま使うとコードの記述量が増え非常に大変なため、WebGLラッパーライブラリであるthree.jsを使うケースも多いです。
three.jsはMr.doobによって開発されたWebGLコンテンツの実装を助けるライブラリです。
正確には、様々な機能をもっているため必ずしもWebGL専用のライブラリというわけではありませんが、現在はほぼWebGL実装には欠かせない3D ウェブのjQuery的存在となっています。
three.jsを利用すると、難易度的にも実装工数的にもピュアなWebGLより格段に開発者の負担を軽減できます。
また、豊富なサンプルやドキュメントの他、日本語の解説書籍等もいくつか出ています。
【three.js公式サイト】
https://threejs.org/
three.jsを使う上でデメリットらしいデメリットはあまりないですが、あえて無理やりデメリットを挙げると
・three.js の流儀に従う必要がある
・ややファイル容量が大きめ
・バージョンアップに追従するのが大変
・成果物の見た目が似通う
となるかと思います。
以上がWebGLの簡単な説明となります。
先駆では、皆様に少しでもご満足いただけるように技術を追求しております。
是非、お気軽にご相談をお願いいたします。
■━━━━━━━━━━━━━━━━━━■
【お気軽にご質問・ご相談ください】
「こんなことをしたいけれど先駆でお願いできる？」
「〇〇するために、うちの場合はいくらかかる？」
など、ちょっとした疑問・質問でも、プロとして責任もってお応えします。
もちろん、見積提示まで相談料など料金は一切発生しません。
ぜひ、お気軽にお問い合わせください
メールでのご相談：contact@senku.jp
フォームからのご相談：https://senku.jp/contact/?utm_source=mm&utm_medium=email&utm_campaign=mm028
■━━━━━━━━━━━━━━━━━━■
＜Senk you Mail 発行元情報＞
会社名：株式会社先駆
住所：〒193-0835
東京都八王子市千人町2-3-16
Tel：042-669-0669
E-mail：contact@senku.jp
Website：https://senku.jp/?utm_source=mm&utm_medium=email&utm_campaign=mm028
=============================
＜本メールマガジンについて＞
本メールは株式会社先駆の取引があるお客様、
弊社担当と名刺交換をさせていただいたお客様、
弊社へお問い合わせくださいましたお客様などに配信しております。
また、お預かりしております個人情報は、
個人情報保護関連法およびガイドラインに従い、
責任をもって管理致します。
https://senku.jp/privacy-policy/?utm_source=mm&utm_medium=email&utm_campaign=mm028
=============================
配信停止を希望の方はこちらから可能です
https://b.bme.jp/bm/p/f/tf.php?id=senku&task=cancel
=============================
copyright Senku Inc. All rights reserved.