system
マリンロード

2017.6.2HTML/CSS 

マリンロード

未来を感じさせるWeb!?WebGLとは

初めまして。
コーディングを担当しています、姿です。
今回が初投稿となります。

さて、初投稿のテーマは… WebGLです。
今更!?と言われてしまいそうですが、きっと知らない人も居ると(勝手に)思ってますので、簡単にご説明をしたいと思います。

WebGLって?

ブラウザで、3次元CGを表示させるための標準仕様のことです。
つまり、ブラウザで3DCGを表示出来る様になるためのものって感じです。
頑張れば、コンシューマーゲーム機並みのCGも表示できるってんだから驚きだぁ。

どんな感じなの?

言葉で説明するより、実物を見てみた方が分かりやすいです。
↓こんな感じに表示されます(URL先を見てみてください!)↓

■Bruno Quintela
http://brunoquintela.com/
CGを表示させるだけじゃない!カーソルでグリグリすると動かせるんだ!!

■Mustang Customizer
http://www.ford.com/cars/mustang/customizer/#!/create
商品紹介にも使える!ユーザーさんがあらかじめ360°確認したい様な商品の場合も手軽に確認してもらうことができますね!

■HexGL
http://hexgl.bkcore.com/play/
本格的なゲームも作れてしまいます!

WebGLすごいじゃん

初めて見た人は、「これ、ホントにWebサイトなの!?」ってなることウケアイです。
こんなWebGLを使用したサイト、作ってみたくないですか?

作れるの???

作れます。
もちろん、例として挙げたサイトの様なクオリティの物は、相当頑張らないと作れないと思いますが、誰もが最初は簡単な物から。
WebGLを比較的手軽に実現するものとして、「three.js」というものがあります。
今回は、このthree.jsを使用して3次元CGを実現する入門サイトをご紹介します。

■最新版で学ぶThree.js入門 – 手軽にWebGLを扱える3Dライブラリ
https://ics.media/entry/14771

■初心者のための!作って学ぶBlenderの基礎
http://nvtrlab.jp/column/2-2
3Dモデリングも勉強して、もっとすごいサイトを作るんだ!という方、プロ並の3Dモデリングができるフリーソフトがあります。
その名は「Blender」。Three.jsで表示させる形式に書き出すこともできるので、とても便利です。

最後に

今回は、WebGLについてお話をしました。
ブラウザで3次元CGを表示させるには、PCスペックを要求されます。
少し前までは、スペックの問題で、「表示までに時間がかかる、、、」「表示されたけど動きがすっごいスローリー」といった感じで、使用するには躊躇する感じでした。
しかし、最近のPCは、安価で高スペックなものも多くなり、上記のようなことも無くなりつつあります。

今後のWebGL、とても楽しみです。(私も、もっと勉強しないと)

現役ウェブ解析士が教えるWebサイトの読み解き方 イメージ
ホームページ制作サービスはこちら
ページTOPへ