インターネットリテラシをゲームでおさらい！ Google 公式 WebGL コンテンツはさすがの超品質！ - WebGL 総本山
ボリューム感満点の力作！ 今回ご紹介するのは Google が公式に提供しているウェブコンテンツで、その高いクオリティはさすがとしか言いようのない、素晴らしい一作です。 簡単に言うと、いわゆる「インターネットに関するリテラシー」をテーマにしたミニゲームがメインコンテンツで、ビジュアルだけでなく内容についても抜かりなく、全てにおいて高い完成度となっています。 実質、現代のウェブを制覇している Google という巨人が本気を出すと、こうなっちゃうんですね…… 本当にすごいです。 生き生きとしたキャラクターたちが魅力的 今回のコンテンツは、ユーザー自身の代役である青い色をした主人公キャラクターと、悪役となる数体のキャラクターなど、多数の NPC が登場するゲーム風のコンテンツで、イントロ部分からもう雰囲気満点です。 まるでコンシューマゲームタイトル……と言ってしまってはちょっと大袈裟ですが、非
WebGL にも関数型プログラミングがやってくる？ 新しい実装の形を提案する WebGL 対応ライブラリ regl - WebGL 総本山
top 2016 年 07 月 WebGL にも関数型プログラミングがやってくる？ 新しい実装の形を提案する WebGL 対応ライブラリ regl Functional Programming for WebGL 今回ご紹介するのは、WebGL に関数型プログラミング、あるいは Reactive プログラミングをもたらすことを掲げた WebGL 対応ライブラリです。 Reactive、流行ってますね。 その流れは、やはり WebGL にもやってきています。 今回ご紹介するのはフロントエンド界隈で流行している React.js とはちょっと違うものですが、根底にある思想は似ているのかもしれません。これまでにない特徴的な記述によって実現される WebGL の実装とは、どんなものなのでしょうか。 関数型プログラミングで書く WebGL はじめに断っておくと、私は関数型プログラミングにも、あるいは
わずか数十行のコードで物理演算付きシーンを構築できる WebGL フレームワーク WhitestormJS - WebGL 総本山
three.js をさらにラップしたフレームワーク 今回ご紹介するのは、WebGL 使いなら誰もが知っていると言っても過言ではない three.js を、さらにもう一段ラップすることでより使いやすくするフレームワーク、WhitestormJS です。 Github や公式サイトには Examples が掲載されていますが、WebGL ヘルパーライブラリである three.js など、コア部分に外部のライブラリを組み込むことによって、驚くほど少ないコードの記述で 3D のシーンを構築できるように工夫されています。 物理演算などのゲーム開発に必要となる機能も追加することで、かなり利便性の高いフレームワークになっているようです。 使いやすさを重視した設計、ドキュメントも完備 この WhitestormJS ですが、実は結構昔からその存在は知っていました。 ちょっと前に見た時は、一見すると開発が止
まるで手書きのラインのような「揺らぐライン」を WebGL で描画するための考察ブログ記事が面白い！ - WebGL 総本山
まるでウゴウゴルーガ風の手書き風ライン 今回ご紹介するのは、とある海外のブログ記事です。 このブログ記事では、WebGL でなんとか手書き風の、有機質なラインを描画できないかと様々な考察がなされています。 また、ライブデモとしてブログ内で動いているサンプルがあるため、実際にどのようなラインが引けるのか、アルゴリズムや解説を見ながら実装結果を試すことができるようになっています。 手書きのアニメーションのような波線 今回のブログは、まずアクセスするとその独特なデザインがパッと目に飛び込んできます。ブログのデザインそのものが、手描きのラインを意識したモノクロベースのデザインになっていますね。 そして今回のブログ記事の冒頭でも、執筆者自身の言葉でこんな風に語られています。 As you may notice from the design of the blog, I'm a big fan of
5000人の中からキャラを見つけ出せ！Point Spriteを活用したJRAスペシャルコンテンツ - WebGL 総本山
懐かしさと共に思わず心まで埋没しそう 今回は、カヤック所属のエンジニア、たじーさんから寄稿をいただきました！ なんと、あの JRA の公式コンテンツが WebGL で実装されているという話です。しかもコンテンツはちょっと懐かしさ漂う、あの作品をテーマに取り入れたものになっていて、物量感がとても爽快な作品となっています。 今回も、単なるコンテンツの紹介や宣伝ではなく、その実装の裏話も事細かく語ってくださいました。 正直言って私なんかではとても思いつかないようなびっくりする方法を使って実装されているんだなあということが、以下の寄稿記事を読むとわかると思います。これは単にコンテンツをプレイしていただけでは、恐らく気が付かなかった実装の工夫だと思います。 生の実装者の貴重な体験談、ぜひご覧になっていただければと思います。 はじめに JRA第60回 有馬記念のスペシャルコンテンツが12月22日に公開
こりゃとんでもねえぞ！！ MozVR チーム純正の WebVR 専用フレームワーク A-Frame がすごい！ - WebGL 総本山
まさかの MozVR チーム純正フレームワーク 今回ご紹介するのは、世界初と言っても過言ではない、WebVR のためのフレームワークです。 しかも、それを管理しているチームはなんと MozVR チームだというではないですか！ これはすごいですね。 単なるライブラリではなく、フレームワークとして提供されているためかなり総合的なサポートが期待できるものとなっており、これはもう今後も注目してウォッチしていかざるをえないものとなっています。 3D レンダリングのベースは three.js を採用 今回ご紹介するこの A-Frame は、ローカルの開発にも対応する本格的なフレームワークで npm によるインストールが可能です。 もちろん、minify したビルド済みの部分だけを利用することもできるようになっていますので、ローカルでもオンラインのコンテンツでも、手軽に利用することができそうですね。 ラ
たくさんの有名な作例とそのソースコードを集約したリポジトリ！ WebGL Samples を活用しよう！ - WebGL 総本山
top 2015 年 07 月 たくさんの有名な作例とそのソースコードを集約したリポジトリ！ WebGL Samples を活用しよう！ 有名なデモが大量に収録された作例集 今回ご紹介するのは、WebGL が話題になり始めた初期の頃から存在する、有名な作例を多数収録したサンプル群です。 このページ自体は、WebGL 界の著名なエンジニア、greggman 氏が管理しています。greggman 氏は、WebGL Fundamentals という WebGL の入門サイトや、TWGL.js という WebGL ヘルパーライブラリなどの作者の方です。 今回ご紹介するページに掲載されているデモは、かなり有名なものが多いので見たことがあるという方のほうがもしかしたら多いかもしれません。WebGL 黎明期より存在する今もなお貴重な作例をぜひ楽しんでみてください。 3D や 2D の多彩な実装例 Web
[2015年上半期振り返り] 個人的に思い出深いオススメ WebGL 作品厳選 32！ - WebGL 総本山
2015年の上半期を振り返る 今回は普段と少し趣向を変えて、2015年の上半期を振り返りながら、私が驚かされたものや感激したものを中心に厳選してご紹介します。 基本的に紹介するのは WebGL 総本山で取り上げたものに限定しますが、紹介した際の記事へのリンクや画像、その他ふんだんに使いつつ紹介していこうと思います。当該記事を見落としてしまった人も、気になるものを見つけたらぜひチェックしてみてくださいね。 アート・デモ・プロモーション部門（全 12 作品） 日本の作品部門（全 8 作品） アカデミック部門（全 6 作品） ビジュアライズ部門（全 6 作品） アート・デモ・プロモーション作品部門 OFFF - Skazka OFFF 2015 のために制作された WebGL デモ Skazka！ 動的なポリゴン生成など見どころ満載！！ びっくり度数：★★★☆☆ この作品のすごいところは、個人的
![[2015年上半期振り返り] 個人的に思い出深いオススメ WebGL 作品厳選 32！ - WebGL 総本山](https://cdn-ak-scissors.b.st-hatena.com/image/square/d341152a6a1940dbbe72478b856d416d4ee0b2f1/height=288;version=1;width=512/https%3A%2F%2Fwebgl.souhonzan.org%2Fi%2Fentry%2F285_001.jpg)
出来る限りシンプルに WebGL の冗長な記述をスマートにするヘルパーライブラリ twgl.js - WebGL 総本山
WebGL 熟練者が生み出した珠玉の一品 今回ご紹介するのは WebGL のヘルパーライブラリ twgl.js です。 作者の方は、three.js の開発に貢献したり、自分でも WebGL の実装を多数行ったりと、WebGL 界隈ではかなり活動されている方です。 今回ご紹介する twgl.js は、出来る限り少ない記述量で、スマートに WebGL の実装を行えるように作られています。three.js ほどの重厚さはなく、あくまでもスクラッチ記述の WebGL 実装を可能な範囲で簡素化できるというものです。 学習用にも、またサクッと WebGL の実装を行う上でも、非常に役に立ちそうなライブラリです。 コードを比較することで見えるものがある この twgl.js が持つ思想は、個人的にはすごく共感できる部分が多いです。 スクラッチで WebGL を記述することは、たくさんの手続きの連続にな
WebGL の基礎はモチロン数学的な知見まで幅広く学習できる WebGL Fundamentals を活用しよう！ - WebGL 総本山
全文英語だが具体的なコードも豊富！ 今回ご紹介するのは、全文英語ですが WebGL の導入に非常に役に立ちそうな WebGL Fundamentals というラーニングサイトです。 具体的なコードの掲載や、動作するサンプル、そして Github で公開されているライブラリのコードなど、参考になる情報がたくさんあります。 コードを見るだけでも勉強になること間違いなし こういった学習のためのサイトを紹介したことは、今まであまりなかったかもしれません。 今回のサイトは全文英語ではありますが、非常にわかりやすく構成が考えられており、タイトルを見て目的別にチェックするのも比較的容易なのではと思います。 実際に動作するサンプルは、埋め込みタイプのものと、別窓で開くタイプと、両方用意されています。 コードもたくさん用意されており、あまり英語が得意じゃないという人にとっても使いやすいサイトではないでしょう
見た目はとっても地味だけど…… WebGL を用いたボロノイ図生成デモが面白い！ - WebGL 総本山
ちょっと地味だけど面白いボロノイ図 今回ご紹介するのは、ボロノイ図(Voronoi Diagrams)を描画する WebGL のデモです。 恐らく、結構古いものなのかなと思いますが、シンプルな実装なのであんまり古臭いとかそういう感じはしません。かなり……シンプルすぎるくらいシンプルではありますけども。 いろいろとインタラクティブに操作できるのでなかなか面白いです。 派手さはゼロ！ でもなかなか楽しい！ まず最初に断っておきますが、このデモはあまり WebGL のメリットを活用しているとは言えないデモです。 シェーダを見る限り、単純に描画にしか WebGL を利用していないので、実際の作図計算には javascript が動いて CPU で処理しているだけです。 これはあくまでも想像ですが、Canvas2D で同じようなことをやったとしても、よほど点の数が増えない限り体感速度にそれほど差は出
javascript で作るシューティングゲームの祭典 #jsstg 開催中！ 作品のご応募お待ちしています！ - WebGL 総本山
応募期間は２月末まで！ まだまだ時間はあります！ タイトル通りですが、今現在、javascript で作るシューティングゲームのイベントを企画しています。 昨年、2014 年にも開催したこちらの企画、今回が第二回となります。 応募条件は javascript で作られているシューティングゲームであることのみ！ ぜひふるってご参加いただけたらと思います。 第一回は実に十作品以上が集まりました！ 2014 年の夏に第一回を開催した javascript シューティングゲーム祭り。 今回はその第二回となります。 過去の開催では十作品以上が集まり、あの窓の杜でも紹介してもらったりしています。 昨年の開催時には、勉強会も併せて開催しました。 作品投稿者以外の方にも広く参加を募り、こちらも懇親会含めて大変有意義な勉強会となりました。 その時の様子は、会場をお借りした @Stocker_jp さんがご自
リアルタイムポストエフェクトで描く油絵風シェーダが見事！ - WebGL 総本山
リアルタイムにポストエフェクト WebGL ではシェーダが利用できることもあり、ポストエフェクトによる実装も比較的簡単に行えます。 今回ご紹介するのは、3D シーンにリアルタイムにエフェクトを加える油絵風のスケッチシェーダです。 作者の方は、先日ご紹介したクリスマス企画にも参加されている方で、本当に多彩な才能をお持ちのようです。 モノクロでもカラーでも ページが表示されると、あの有名なスタンフォードバニーがレンダリングされています。 もちろん、最初からポストエフェクトが掛かった状態になっていて、リアルタイムにエフェクトが加えられている様子を見ることが可能です。 マウスカーソルの位置に応じたインタラクティブな視点の変更、さらにクリック操作に反応してカラーとモノクロが切り替わるようになっています。 静止画ではわかりにくいですが、動く様子は非常におもしろいのでお勧めです。 作者の方の別の作品です
ビルトイン関数などの詳細な解説が満載！ GLSL に関する貴重な情報が閲覧可能 - WebGL 総本山
GLSL の貴重な解説サイト ご存じのとおり、WebGL では GLSL と呼ばれるシェーダ記述言語を利用します。C 言語にやや似通った文法を持つ独自の言語です。 WebGL は javascript から利用できるものの、この GLSL も同時に修得しなければならないために若干学習コストが高くなってしまいます。また情報が少ないという側面も学習のしにくさに拍車をかけています。 今回ご紹介するのは、そんな GLSL の基本がギュッと詰まった貴重なサイトになります。 ビルトイン関数から型の種類まで網羅 GLSL は、OpenGL 系で利用されるシェーダ言語なので、必ずしも利用されるのは WebGL だけとは限りません。 また、GLSL にも通常の OpenGL などと同様にいくつかのバージョンが存在します。バージョンが異なると、一部の関数が利用できなかったり、あるいは記述方法にほんの少しだけ差
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
情報量がとても多く見た目にも考え抜かれた地震情報の可視化 WebGL デモ！ Nine Point Five earthquake visualization - WebGL 総本山
three.js でカスタムシェーダを実装するためのチュートリアルがなかなかのボリュームで良記事 - WebGL 総本山