わずか数十行のコードで物理演算付きシーンを構築できる WebGL フレームワーク WhitestormJS - WebGL 総本山
three.js をさらにラップしたフレームワーク 今回ご紹介するのは、WebGL 使いなら誰もが知っていると言っても過言ではない three.js を、さらにもう一段ラップすることでより使いやすくするフレームワーク、WhitestormJS です。 Github や公式サイトには Examples が掲載されていますが、WebGL ヘルパーライブラリである three.js など、コア部分に外部のライブラリを組み込むことによって、驚くほど少ないコードの記述で 3D のシーンを構築できるように工夫されています。 物理演算などのゲーム開発に必要となる機能も追加することで、かなり利便性の高いフレームワークになっているようです。 使いやすさを重視した設計、ドキュメントも完備 この WhitestormJS ですが、実は結構昔からその存在は知っていました。 ちょっと前に見た時は、一見すると開発が止
あまりにも完成度の高すぎるパーティクルの神域！ ヘネシーの WebGL 製サイトが凄すぎる！ - WebGL 総本山
ムービーとの境界を感じさせない見事な演出 今回ご紹介するのは、ブランデーの銘柄として、お酒にあまり詳しくない方でも耳にしたことがあると思われる、ヘネシー（Hennessy）のウェブサイトです。 ヘネシーは、フランスのコニャックと呼ばれる地方で生産されている高級ブランデーのブランド名ですね。……と偉そうに書いて見たものの、私はお酒は全然詳しくないので、その点の解説はやめておきます。 今回のサイトは、現時点での WebGL におけるパーティクル表現としては、間違いなく世界随一の出来栄えと断言できます。 ムービーと WebGL レンダリングとの境い目がわからないほど見事なシーン遷移も含め、あらゆる点で他の追随を許さない完璧な完成度となっています。 公式ムービーをさらに WebGL で彩った作品 Youtube などでヘネシーの最近公開された動画を探してみると、今回のサイトの背景に時折流れる、オリ
豪華講師陣が送る本格 WebGL スクール！ 第三期の募集を開始します！ - WebGL 総本山
基礎から応用までを網羅する 2014 年より開催している WebGL スクール。その第三期の募集を開始します。 これまでの WebGL スクールでは doxas こと私、杉本 雅広が講義を単独で行うスタイルが基本でした。今回はなんと WebGL や three.js、そして WebVR に熟練した特別講師が本スクールの講義に参加します。 これまでの WebGL スクールに比べ、より多くの刺激やインスピレーションを得られる環境を用意しました。 興味のある方は以下、概要等をよくお読みいただき参加をご検討ください。 WebGL 基礎スクール（本講義） 今回の WebGL スクールも、これまで行ってきた第一期、第二期同様に、WebGL を基礎からしっかりと身につける ことができるスクールとなっています。 スクールの講義は、wgld.org や、当サイトの運営を行っている杉本 雅広が責任を持って担当
これが世界最高峰の GLSL シェーダデモか！ 質感にもこだわりを感じる驚きの GLSL 作品 Snail がすごい！ - WebGL 総本山
top 2015 年 12 月 これが世界最高峰の GLSL シェーダデモか！ 質感にもこだわりを感じる驚きの GLSL 作品 Snail がすごい！ 並の PC では滑らか再生は難しい 今回ご紹介するのは、ShaderToy に投稿された驚きの GLSL シェーダデモ作品です。 当サイトではこれまでにも ShaderToy の作品をご紹介したことがありましたが、正直言って、あのサイトには驚きのデモが本当にたくさんあります。そんな中でも、今回のデモには一種突出した、よくわからんけどとにかくすごい感 がありますね。 この作品を投稿したのは、なんと ShaderToy の生みの親である iq さんです。彼はレイマーチングに関する多くの文献を公開するなど、この界隈ではかなり有名なエンジニアです。 質感も見事なカタツムリ！ 今回の作品には Snail というタイトルがつけられています。 デモを見れ
えっ!? WebVRってそういうこと？ サイト自体をVRで楽しめる「カヤックVR部」サイト - WebGL 総本山
今まさに隆盛の VR コンテンツがカヤックから登場！ 今回は、カヤックのエンジニアで @edo_m18 の HN でお馴染みの比留間さんから寄稿をいただきました。 カヤックではつい先日、VR 部という新しい活動をスタートしています。カヤックのエンジニア自身の言葉で語られるカヤック VR 部とは？ ぜひご覧になってみてください！ 先日公開されたカヤックVR部のサイト。実はこのサイト自体がWebVR化されており、Oculus Riftやハコスコ（スマートフォン向け簡易VRグッズ）を使うことで今話題の「VR」を手軽に楽しむことができるようになっています。 いっけん普通のサイトだけど実は… カヤックVR部のサイトにアクセスするとまず、ノイズでちりちりと動く「VR部」という大きなロゴが目に入ります。 その下にはOculus Riftの画像が続き、そのままカヤックが手がけたVRコンテンツの数々が動画や
WebGL による physically based rendering(PBR) チュートリアルのイントロ記事！ 今後に期待高まる！ - WebGL 総本山
top 2015 年 07 月 WebGL による physically based rendering(PBR) チュートリアルのイントロ記事！ 今後に期待高まる！ 物理ベースシェーディングの勉強に 今回ご紹介するのは、昨今、様々なところで目にする機会の増えた PBR（physically based randering）のチュートリアル記事……の第一弾となるイントロ記事です。 この記事自体は、WebGL だけでなく 3DCG の分野で有名な Marcin Ignac 氏のブログエントリです。氏は、WebGL を Node.js 環境で開発するための pex というライブラリを手掛けるなど、とても精力的に WebGL 関連の活動をしている方でもあります。 今回ご紹介するのは連載の第一弾となるイントロ記事なのですが、実行可能な WebGL サンプルへのリンク、また参考になりそうな多数のコン
3D マップシステムをオープンソースで提供するサービス eeGeo は WebGL や VR にも対応！ - WebGL 総本山
豊富なプラットフォーム向けサービスを展開 今回ご紹介するのは、eeGeo という 3D マップ技術を提供する企業のサイトです。 私は知らなかったのですが、どうやら docomo の 3D マップ機能は、この eeGeo のサービスを利用しているみたいですね。 スマートフォンのアプリとしてのプラットフォーム以外にも、WebGL 版や、VR 対応版などが用意されています。今回はこの WebGL 版をご紹介しようと思います。 車や飛行機も登場するポップなデザイン WebGL ビューは、最初のロードの時間もそれほど長いということはなく、一度表示されてしまえば重いという感じもしません。 非常に動きがスムーズで、また文字を埋め込んだビューも非常に直感的で見やすいです。 カメラが引いている状態では、地名はツールチップのような感じでスクリーン上に描かれています。 ホイール操作でカメラをズームアップさせてい
出来る限りシンプルに WebGL の冗長な記述をスマートにするヘルパーライブラリ twgl.js - WebGL 総本山
WebGL 熟練者が生み出した珠玉の一品 今回ご紹介するのは WebGL のヘルパーライブラリ twgl.js です。 作者の方は、three.js の開発に貢献したり、自分でも WebGL の実装を多数行ったりと、WebGL 界隈ではかなり活動されている方です。 今回ご紹介する twgl.js は、出来る限り少ない記述量で、スマートに WebGL の実装を行えるように作られています。three.js ほどの重厚さはなく、あくまでもスクラッチ記述の WebGL 実装を可能な範囲で簡素化できるというものです。 学習用にも、またサクッと WebGL の実装を行う上でも、非常に役に立ちそうなライブラリです。 コードを比較することで見えるものがある この twgl.js が持つ思想は、個人的にはすごく共感できる部分が多いです。 スクラッチで WebGL を記述することは、たくさんの手続きの連続にな
WebGL 開発を強力にサポートする Chrome 拡張機能が登場！ Shader Editor Extension for Google Chrome - 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 でも可能になったというのは胸アツです。個人的にはかなり感動しました。 さっそく簡単にですが
WebGL スクール第２期の募集を開始します！ 2015年5月開講！ - WebGL 総本山
受講希望者の募集を開始します！ WebGL を基礎からしっかり学べる 本格 WebGL スクール の第二期を開催します。 第一期は、平日の夜間に 2 時間 30 分というスケジュールで全 12 回を開催しました。第二期となる今回は、開催曜日を土曜日に変更し講義の時間も延長、より多くの人に参加していただきやすい形にスケジュールを見直しました。 よりピンポイントに 一度の講義でより実践的なスキルを得られるよう 工夫し、講義内容も第一期の反省点を盛り込み改良しました。 講義の開始時期はゴールデンウィーク明けの 5 月中旬からになります。また、スクールの初回は 体験会 として、スクールの雰囲気を肌で感じていただけるようにするつもりです。WebGL にちょっとでも興味があるなら、少しだけお付き合いいただき下記詳細をご覧ください。 スクール概要 iOS が対応したことにより、PC だけでなくモバイルの
WebGL の基礎はモチロン数学的な知見まで幅広く学習できる WebGL Fundamentals を活用しよう！ - WebGL 総本山
全文英語だが具体的なコードも豊富！ 今回ご紹介するのは、全文英語ですが WebGL の導入に非常に役に立ちそうな WebGL Fundamentals というラーニングサイトです。 具体的なコードの掲載や、動作するサンプル、そして Github で公開されているライブラリのコードなど、参考になる情報がたくさんあります。 コードを見るだけでも勉強になること間違いなし こういった学習のためのサイトを紹介したことは、今まであまりなかったかもしれません。 今回のサイトは全文英語ではありますが、非常にわかりやすく構成が考えられており、タイトルを見て目的別にチェックするのも比較的容易なのではと思います。 実際に動作するサンプルは、埋め込みタイプのものと、別窓で開くタイプと、両方用意されています。 コードもたくさん用意されており、あまり英語が得意じゃないという人にとっても使いやすいサイトではないでしょう
自分の好みの画像を用いて思いどおりのノーマルマップを自在に生成できる SmartNormap！ - WebGL 総本山
パラメータの細かな調整も可能！ 今回ご紹介するのは、自在に好みのノーマルマップ（法線マップ）を生成することができる WebGL 実装のウェブページです。 自分の好きな画像からノーマルマップを生成できることはもちろん、各種のパラメータを調整すれば、エッジの強さを調整することもできる機能性を持っています。 ブラーやバイアスの調整が可能 ノーマルマップは、バンプマッピングを行う際に利用される特殊なテクスチャ用の画像です。 ノーマルマップには、その名のとおり法線（もしくは法線として利用するためのデータ）の情報が画像の中に焼きこまれています。これをもとに照明効果を計算することによって、あたかも凹凸が存在するかのように見せるのが、いわゆる「バンプマッピング」と呼ばれるテクニックですね。 SmartNormap を利用すれば、この法線マップを好きな画像から自由に生成することが可能です。 ドドドンッ！！！
カスタムシェーダによるハイレベルな CG 表現！ 被写界深度や環境マッピング、ブルーム表現など盛りだくさん！ - WebGL 総本山
また three.js か！ と思ったら…… 今回ご紹介するのは three.js を利用した WebGL デモンストレーションです。 個人的には最近どうも three.js 関連の作品ばかり紹介しているので、最初はまた three.js か……と思ってしまったのですが、今回のやつはちょっとすごいのでご紹介します。 正直な話、あくまでも良い意味でですがここまで「three.js っぽくない three.js 作品」は初めてかもしれない…… カスタムシェーダを大量に利用したハイレベルデモ 今回のデモはページが表示されるとまずクオリティレベルを選択するページが表示されます。 タブレットやスマートフォンでも再生されることを想定してこのような作りになっているようですね。 low を選択した場合には各種のエフェクト処理が省略され簡易的に表示できるみたいですが、それでも十分に綺麗に見えると思います。逆
HTML5 Conference に登壇します――GLSL や Blender に関するハンズオンもやるよ！！ - WebGL 総本山
まもなく開催！ HTML5 Conference ! 2015 年 1 月 25 日に、北千住で開催される HTML5 Conference に登壇します。 今回は「【ハンズオン】やってみたら実は簡単！ WebGLで開ける新しい表現」と題し、WebGL にあまり馴染みのない方にも楽しんでいただけるような、ハンズオン形式のセッションになる予定です。 私が全編しゃべるわけじゃなくて GLSL に関する発表の部分だけ、一部担当します。 事前の準備が必要な部分もあるので注意！ HTML5 Conference は残念ながら参加募集が既に満員御礼状態…… 参加者枠は 1200 人でしたが既に数百人のキャンセル待ちが発生している状態です。 これだけの人数が一堂に会することになるため、当日は Wifi など、通信関係はほぼ使えない状態になることが予想されています。 そこで私たちのセッションでは、ハンズオ
WebGL+Retina の落とし穴！？ Retina ディスプレイで WebGL のレンダリング結果を正しく表示する tips - WebGL 総本山
今後は対応すべき場面が増えそうな高解像度設定 今回ご紹介するのは、Apple 社の製品で使われている Retina ディスプレイなどの、高解像度のディスプレイを搭載した端末用の tips です。 スマートフォンを中心に高解像度化がどんどん進んでいる現代。 今後はこういった高解像度端末への対応が必要になる場面もきっと増えていくと思います。高解像度ディスプレイでの WebGL の扱いについて検証してみます。 ※本記事の執筆には @Stocker_jp さんに多大なるアドバイスをいただきました。ありがとうございます！ 高解像度ディスプレイに潜む WebGL に科せられた罠とは iPhone や最新の iMac など、最近の Apple 社の製品の多くに Retina ディスプレイと呼ばれる高解像度ディスプレイが採用されています。 本来なら 1 ピクセルとして表示される色の情報が、Retina デ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ぼくらの街も戦場に！ ストリートビューと連携した Independence Day のサイトがすごい！ - WebGL 総本山
歪曲収差（ディストーション）を GLSL で表現！ レンズによる歪みを再現できる fisheye.js！ - WebGL 総本山
[実装裏話]顔から音楽？WebGLで音楽と映像が自動生成されるIPSA FACE MELODY - WebGL 総本山
フラグメントシェーダの実装チュートリアルや小さなデモが多数公開されているブログ xdPixel - WebGL 総本山
WebGL によるプレビュー機能も備えた ArtStation！ 世界中のクリエイターの傑作に驚愕の連続！ - WebGL 総本山