はてなブックマーク

three.js をさらにラップしたフレームワーク 今回ご紹介するのは、WebGL 使いなら誰もが知っていると言っても過言ではない three.js を、さらにもう一段ラップすることでより使いやすくするフレームワーク、WhitestormJS です。 Github や公式サイトには Examples が掲載されていますが、WebGL ヘルパーライブラリである three.js など、コア部分に外部のライブラリを組み込むことによって、驚くほど少ないコードの記述で 3D のシーンを構築できるように工夫されています。 物理演算などのゲーム開発に必要となる機能も追加することで、かなり利便性の高いフレームワークになっているようです。 使いやすさを重視した設計、ドキュメントも完備 この WhitestormJS ですが、実は結構昔からその存在は知っていました。 ちょっと前に見た時は、一見すると開発が止

ムービーとの境界を感じさせない見事な演出 今回ご紹介するのは、ブランデーの銘柄として、お酒にあまり詳しくない方でも耳にしたことがあると思われる、ヘネシー（Hennessy）のウェブサイトです。 ヘネシーは、フランスのコニャックと呼ばれる地方で生産されている高級ブランデーのブランド名ですね。……と偉そうに書いて見たものの、私はお酒は全然詳しくないので、その点の解説はやめておきます。 今回のサイトは、現時点での WebGL におけるパーティクル表現としては、間違いなく世界随一の出来栄えと断言できます。 ムービーと WebGL レンダリングとの境い目がわからないほど見事なシーン遷移も含め、あらゆる点で他の追随を許さない完璧な完成度となっています。 公式ムービーをさらに WebGL で彩った作品 Youtube などでヘネシーの最近公開された動画を探してみると、今回のサイトの背景に時折流れる、オリ

今まさに隆盛の VR コンテンツがカヤックから登場！ 今回は、カヤックのエンジニアで @edo_m18 の HN でお馴染みの比留間さんから寄稿をいただきました。 カヤックではつい先日、VR 部という新しい活動をスタートしています。カヤックのエンジニア自身の言葉で語られるカヤック VR 部とは？ ぜひご覧になってみてください！ 先日公開されたカヤックVR部のサイト。実はこのサイト自体がWebVR化されており、Oculus Riftやハコスコ（スマートフォン向け簡易VRグッズ）を使うことで今話題の「VR」を手軽に楽しむことができるようになっています。 いっけん普通のサイトだけど実は… カヤックVR部のサイトにアクセスするとまず、ノイズでちりちりと動く「VR部」という大きなロゴが目に入ります。 その下にはOculus Riftの画像が続き、そのままカヤックが手がけたVRコンテンツの数々が動画や

老舗ベンチマークソフトメーカー 今回ご紹介するのは、オンラインで即座に実行可能なウェブベンチマークアプリケーションです。 ベンチマークに関しては大手と言って差し支えない企業、Basemark が提供しているウェブサービスで、ブラウザそのものがどの程度の性能を持ち、実行環境でどのような最大性能が発揮できているか、数値でベンチマーク結果を教えてくれます。 テスト項目はかなり多岐に渡りますが、CSS3 や WebGL に関するものが多めになっています。 ウェブの FREE バージョンを使ってみよう ページに訪れると、画面に大きくスタートボタンが配置されたページが出てくると思います。 このページに訪れた時点で、どのような OS で、どのようなブラウザを使い、どのようなモニターで閲覧しているのか、といった情報が既に表示されているはずです。 画面を一番下までスクロールしていくと、デモモードでの起動もで

top 2016 年 05 月 シェーダを駆使して大気の揺らぎ・捻じれを表現するエフェクトがすごい！ 解説記事もついてて至れり尽くせり シェーダ芸で見せる華麗なエフェクト 今回ご紹介するのは、海外の技術ブログで紹介されていたディストーションエフェクトと、その解説記事です。 先日、three.js で横スクロールのゲームを作る解説記事が掲載されていたものをご紹介したばかりですが、今回は GLSL を活用した GLSL シェーダエフェクトの解説記事となっています。この Codrops という技術ブログすごいですね…… 今回のデモは、three.js などは使わず漢らしくシェーダ一本でエフェクト掛けてて、しかもその内容を解説する記事までついてて、もうほんとありがとうございますという感じがしました。 シェーダ１パスで見せる揺らぐ大気 今回のブログ記事のタイトルは「Heat Distortion E

基礎から応用までを網羅する 2014 年より開催している WebGL スクール。その第三期の募集を開始します。 これまでの WebGL スクールでは doxas こと私、杉本 雅広が講義を単独で行うスタイルが基本でした。今回はなんと WebGL や three.js、そして WebVR に熟練した特別講師が本スクールの講義に参加します。 これまでの WebGL スクールに比べ、より多くの刺激やインスピレーションを得られる環境を用意しました。 興味のある方は以下、概要等をよくお読みいただき参加をご検討ください。 WebGL 基礎スクール（本講義） 今回の WebGL スクールも、これまで行ってきた第一期、第二期同様に、WebGL を基礎からしっかりと身につける ことができるスクールとなっています。 スクールの講義は、wgld.org や、当サイトの運営を行っている杉本 雅広が責任を持って担当

Github からクローンもできる 今回ご紹介するのは、フランスの国立の機関で開発されている地図や地形データのビジュアライズを目的としたフレームワークです。 WebGL 製のフレームワークで、Github にてソースコードも公開されており、かなり力が入っている感じが伝わってくる出来栄えです。 様々なデータ形式に対応していることもそうですが、どのようにリッチな表現でブラウザを通じてデータを見せるか、とてもよく考えられています。 点群表示もサポート、ちょっとしたエフェクトも 今回のフレームワーク、iTowns という名前はちょっとありがちなネーミングのような感じもしますが、フランスの国立機関で研究されているだけあって、内容は結構硬派な感じです。 いわゆる Google ストリートビューのような、三次元での街の景観の可視化を行っているデモが公開されており、実際にサイトで動いているものを使用するこ

top 2016 年 02 月 超ハイレベルな作品が入り乱れた Tokyo Demo Fest 2016！ 大興奮の２日間をレポート！ 最高峰の 3DCG やアート・ミュージック作品たち！ 2016 年 2 月、20 日と 21 日の 2 日間に行われた TokyoDemoFest 2016 は、年に一度の、日本で唯一のデモパーティ。 そんな一年に一度だけの特別なデモシーンのお祭りに参加してきました。昨年に引き続きの二度目の参加でしたが、今年は昨年と比較して圧倒的にレベルが上がっていました。 GLSL を駆使した GLSL だけで表現するコンポや、楽曲だけのコンポであるミュージックコンポ、そしてデモ作品がシノギを削るデモコンポに、さらには数々の有益なセミナー…… とにかく見どころ満載、大興奮の 2 日間でした。 会場が広くなりモニターも巨大化して大迫力に！ 今年は会場を 3331 Arts

最新エコシステムを搭載した住宅はこんな感じ？ 今回ご紹介するのは、住宅の設備に関する商品を扱うメーカーのサイトです。 恐らく、住宅設備の総合取り扱いのようなメーカーだと思うのですが、エコシステムを活用した太陽光パネルや天然ガス機器などが設置された、仮想的な住宅のなかを散策できます。 散策とは言っても、完全に自由に動き回れるというわけではありません。しかし、描画が結構美しくて、その割にそこまで重いわけでもなく、WebGL の実装として見てもなかなかよくできていると思います。 リソースは多め 先ほど、このサイトの描画はそれほど重くない、と言いましたが、リソースについてはかなりの量を一度にダウンロードしているようです。 最初の WebGL のレンダリングが出るまでの間に、結構待たされるシーンがあります。また、これらの事情から安定した有線の回線で接続している状態でないと、そもそも閲覧自体が難しいか

手書き文字の認識が違った意味でよく見える！ 今回ご紹介するのは、ニューラルネットワークを活用し二次元平面上に描かれた模様から、数字として認識される様子を可視化した、面白いデモンストレーションです。 私は残念ながらこの手の学がまったく無く、正確に解説することが難しいのですが、Convolutional Neural Network というものを使って文字を認識するような、特殊なアルゴリズムを可視化しているのだと思います。 階層構造になった状態に、どのようなつながりがあるのかを可視化するのには三次元表現がうってつけですね。 数字を描いてみるだけでも楽しめる 先に触れたとおり、私はこういった学問の知識がないのでものすごく初歩的なことや、間違ったことを書いているかもしれません。その点はご了承ください。 今回のデモを見ると、文字認識のためのニューラルネットワークが、どのように機能しているのか、その一

神秘に満ちた美しい姿 今回ご紹介するのは、まるでアート作品のような非常に美しい、WebGL のデモンストレーション作品。 ポリゴン数自体が多いというよりも、その見せ方が非常に上手な印象を受けるデモですね。 深海の奥深く、人類のまだ見たことのない神秘の世界を見事に再現したデモをぜひご覧になってみてください。 見た目の美しさだけではない高い完成度 今回のデモの最大のポイントは、なんと言ってもその美しいレンダリングです。 ポストエフェクトを上手に利用することで、幻想的とも言える美しいクラゲを表現しています。 今回のデモはけして軽い作品ではないですが、できるだけ高解像度のディスプレイで、なおかつハイパワーなマシンで見たほうが感動が大きいと思います。 キャプチャしてもどうしても小さくなってしまいますが、せめて雰囲気だけでも伝わるでしょうか。 マウスのホイール操作やドラッグ操作により、視点の変更やズー

豊富なプラットフォーム向けサービスを展開 今回ご紹介するのは、eeGeo という 3D マップ技術を提供する企業のサイトです。 私は知らなかったのですが、どうやら docomo の 3D マップ機能は、この eeGeo のサービスを利用しているみたいですね。 スマートフォンのアプリとしてのプラットフォーム以外にも、WebGL 版や、VR 対応版などが用意されています。今回はこの WebGL 版をご紹介しようと思います。 車や飛行機も登場するポップなデザイン WebGL ビューは、最初のロードの時間もそれほど長いということはなく、一度表示されてしまえば重いという感じもしません。 非常に動きがスムーズで、また文字を埋め込んだビューも非常に直感的で見やすいです。 カメラが引いている状態では、地名はツールチップのような感じでスクリーン上に描かれています。 ホイール操作でカメラをズームアップさせてい

top 2015 年 12 月 これが世界最高峰の GLSL シェーダデモか！ 質感にもこだわりを感じる驚きの GLSL 作品 Snail がすごい！ 並の PC では滑らか再生は難しい 今回ご紹介するのは、ShaderToy に投稿された驚きの GLSL シェーダデモ作品です。 当サイトではこれまでにも ShaderToy の作品をご紹介したことがありましたが、正直言って、あのサイトには驚きのデモが本当にたくさんあります。そんな中でも、今回のデモには一種突出した、よくわからんけどとにかくすごい感 がありますね。 この作品を投稿したのは、なんと ShaderToy の生みの親である iq さんです。彼はレイマーチングに関する多くの文献を公開するなど、この界隈ではかなり有名なエンジニアです。 質感も見事なカタツムリ！ 今回の作品には Snail というタイトルがつけられています。 デモを見れ

懐かしさと共に思わず心まで埋没しそう 今回は、カヤック所属のエンジニア、たじーさんから寄稿をいただきました！ なんと、あの JRA の公式コンテンツが WebGL で実装されているという話です。しかもコンテンツはちょっと懐かしさ漂う、あの作品をテーマに取り入れたものになっていて、物量感がとても爽快な作品となっています。 今回も、単なるコンテンツの紹介や宣伝ではなく、その実装の裏話も事細かく語ってくださいました。 正直言って私なんかではとても思いつかないようなびっくりする方法を使って実装されているんだなあということが、以下の寄稿記事を読むとわかると思います。これは単にコンテンツをプレイしていただけでは、恐らく気が付かなかった実装の工夫だと思います。 生の実装者の貴重な体験談、ぜひご覧になっていただければと思います。 はじめに JRA第60回 有馬記念のスペシャルコンテンツが12月22日に公開

まさかの MozVR チーム純正フレームワーク 今回ご紹介するのは、世界初と言っても過言ではない、WebVR のためのフレームワークです。 しかも、それを管理しているチームはなんと MozVR チームだというではないですか！ これはすごいですね。 単なるライブラリではなく、フレームワークとして提供されているためかなり総合的なサポートが期待できるものとなっており、これはもう今後も注目してウォッチしていかざるをえないものとなっています。 3D レンダリングのベースは three.js を採用 今回ご紹介するこの A-Frame は、ローカルの開発にも対応する本格的なフレームワークで npm によるインストールが可能です。 もちろん、minify したビルド済みの部分だけを利用することもできるようになっていますので、ローカルでもオンラインのコンテンツでも、手軽に利用することができそうですね。 ラ

まさかのオープンソース！ 今回ご紹介するのは、かなり本気度の高い WebGL 製のシューティングゲームです。 もともとは、Android 向けのモバイルアプリだったようですが、驚くべきことに、なんと Github にて一部のコードが公開されています。 既にアプリケーションとしてリリースされているものの移植作品だけあってその完成度は非常に高いです。プレイ動画（トレーラー）も公開されているので、ぜひご覧になってみてください。 動作も軽快！ 元祖 Android 版に備わっていた機能のうち、一部は未実装というか Beta のようですが、基本的にはほとんど同じような感じで操作することができるようになっている本 WebGL 版。 オプションメニューなども基本的には同じレイアウトで揃えられているので、サウンドのオンオフや、FPS などの表示はオプションから行えます。 いくつかのメニューはまだベータっぽ

top 2015 年 07 月 たくさんの有名な作例とそのソースコードを集約したリポジトリ！ WebGL Samples を活用しよう！ 有名なデモが大量に収録された作例集 今回ご紹介するのは、WebGL が話題になり始めた初期の頃から存在する、有名な作例を多数収録したサンプル群です。 このページ自体は、WebGL 界の著名なエンジニア、greggman 氏が管理しています。greggman 氏は、WebGL Fundamentals という WebGL の入門サイトや、TWGL.js という WebGL ヘルパーライブラリなどの作者の方です。 今回ご紹介するページに掲載されているデモは、かなり有名なものが多いので見たことがあるという方のほうがもしかしたら多いかもしれません。WebGL 黎明期より存在する今もなお貴重な作例をぜひ楽しんでみてください。 3D や 2D の多彩な実装例 Web

top 2015 年 07 月 WebGL による physically based rendering(PBR) チュートリアルのイントロ記事！ 今後に期待高まる！ 物理ベースシェーディングの勉強に 今回ご紹介するのは、昨今、様々なところで目にする機会の増えた PBR（physically based randering）のチュートリアル記事……の第一弾となるイントロ記事です。 この記事自体は、WebGL だけでなく 3DCG の分野で有名な Marcin Ignac 氏のブログエントリです。氏は、WebGL を Node.js 環境で開発するための pex というライブラリを手掛けるなど、とても精力的に WebGL 関連の活動をしている方でもあります。 今回ご紹介するのは連載の第一弾となるイントロ記事なのですが、実行可能な WebGL サンプルへのリンク、また参考になりそうな多数のコン

2015年の上半期を振り返る 今回は普段と少し趣向を変えて、2015年の上半期を振り返りながら、私が驚かされたものや感激したものを中心に厳選してご紹介します。 基本的に紹介するのは WebGL 総本山で取り上げたものに限定しますが、紹介した際の記事へのリンクや画像、その他ふんだんに使いつつ紹介していこうと思います。当該記事を見落としてしまった人も、気になるものを見つけたらぜひチェックしてみてくださいね。 アート・デモ・プロモーション部門（全 12 作品） 日本の作品部門（全 8 作品） アカデミック部門（全 6 作品） ビジュアライズ部門（全 6 作品） アート・デモ・プロモーション作品部門 OFFF - Skazka OFFF 2015 のために制作された WebGL デモ Skazka！ 動的なポリゴン生成など見どころ満載！！ びっくり度数：★★★☆☆ この作品のすごいところは、個人的

WebGL 熟練者が生み出した珠玉の一品 今回ご紹介するのは WebGL のヘルパーライブラリ twgl.js です。 作者の方は、three.js の開発に貢献したり、自分でも WebGL の実装を多数行ったりと、WebGL 界隈ではかなり活動されている方です。 今回ご紹介する twgl.js は、出来る限り少ない記述量で、スマートに WebGL の実装を行えるように作られています。three.js ほどの重厚さはなく、あくまでもスクラッチ記述の WebGL 実装を可能な範囲で簡素化できるというものです。 学習用にも、またサクッと WebGL の実装を行う上でも、非常に役に立ちそうなライブラリです。 コードを比較することで見えるものがある この twgl.js が持つ思想は、個人的にはすごく共感できる部分が多いです。 スクラッチで WebGL を記述することは、たくさんの手続きの連続にな

top 2015 年 04 月 WebGL 開発を強力にサポートする Chrome 拡張機能が登場！ Shader Editor Extension for Google Chrome WebGL 開発を強力にサポートする Chrome 拡張機能が登場！ Shader Editor Extension for Google Chrome Chrome にもシェーダエディタの時代がやってきた！ 今回ご紹介するのは、Chrome 用の拡張機能で、導入することによってシェーダのリアルタイム編集が可能になる Shader Editor Extension です。 従来から、Firefox にはデフォルトでシェーダを編集するための機能が備わっていました。拡張機能というかたちではありますが、これが Chrome でも可能になったというのは胸アツです。個人的にはかなり感動しました。 さっそく簡単にですが

WebVR に完全対応したデモ！ 今回ご紹介するのは、WebGL で作られた VR 表示にも対応したデモンストレーションです。 ストーリー性のあるコンテンツになっており、Oculus Rift での閲覧はもちろんのこと、Google CardBoard でも見ることができます。当然ながら、それらの端末が無くても PC 単体で閲覧は可能です。ちなみに、Oculus Rift DK2 で普通に見れました。 独特な雰囲気をぜひ味わってみてください。 視線を動かしてキャラクターを操作しよう！ PC 単体でも VR 機器でも扱えるように作られているため、操作系はちょっと独特です。 PC の場合であれば、マウスの動きが視線を動かす操作に連動します。マウスを動かすと、横方向にのみ注視点を動かすことができます。 注視点を動かすと、その注視点の先を目標地点として、キャラクターが移動していくスタイルになってい