raymarching for games - primitive: blog
demoscene の世界では近年 raymarching というレンダリング手法がよく用いられています。ポリゴンモデルは使わず、モデルデータは数式の図形としてシェーダコードの中で表現し、pixel shader で図形との距離を求めて可視化していく、というものです。 demoscene (4k/64k intro) の厳しい容量制限の中綺麗な絵を出すために生み出された手法ですが、従来のポリゴンベースの手法では難しい独特の絵を出すことができるという副次的効果があります。 raymarching の代表的な作品群 この手法は PS4 世代以降、小規模ゲーム開発チーム向けの有用なツールになるんじゃないかと考えていて、atomic では試しに背景にこの手法を用いています。以下はその過程や考察です。 まず、raymarching の基本については demoscene.jp の人たちが素晴らしい解説
WebGLの基本
WebGLを基本から学ぶ授業. この記事はWebGLを基本から教える記事である。 他のサイトに載せてあるような昔のOpenGLが更新された記事ではなく、 時代遅れのアイデアを捨てて、 WebGLとは何か、WebGLがどうやって動くかについて、理解へと導く、完全に新たな記事である。 WebGL2に興味があればこれを参照して下さいwebgl2fundamentals.org 基本 基本 WebGLの仕組み WebGLのシェーダーとGLSL WebGL State Diagram 画像処理 WebGLにおける画像処理 WebGLにおける画像処理。続き 2Dでの移動、回転、拡大縮小、行列計算 二次元での移動 二次元での回転 二次元での拡大縮小 二次元での行列数学 3D 三次元の正投影 三次元透視投影 三次元のカメラ Lighting 三次元指向性光源 三次元点光源 Spot Lighting St
シェーダだけで世界を創る！three.jsによるレイマーチング
2016/02/14 シェーダだけで世界を創る！three.jsによるレイマーチング GPU の熱でチョコも溶けちゃう！？ GLSL シェーダテクニック勉強会 @gam0022Read less
プログラミングと楽しさの大切さ - どくらぼ
なんか書き残しておきたくなったので、唐突にブログを書く。 プロ野球選手のイチローが、42 歳でメジャーリーグ記録に迫る勢いで今でも活躍しているというニュースをたまたま見かけた。 仮に私の体にイチローの魂が突然宿ってしまったらどうなるだろう……というめっちゃどうでもいいことを考えた。たぶん、明日の朝、私は早朝ランニングをしていると思う。そこまで想像した時に考えたのは、やっぱりすごい人にはすごい理由があるんだよなってことだった。同時にきっと、よく言われていることではあるけど遅すぎるってことはないんだろうなとも思った。 すごい人には、すごいと言われるだけの理由がある。 だから例えば、すごいと言われたいのなら、すごいと言われるだけの努力や生き方が、キレイ事じゃなくてやっぱり必要なんだと思う。 でも、努力してがんばってすごいと言われるのって実は本質から外れているような気がする。 たぶん、好きでやって
エフェクト作成入門講座 Three.js編 RPGのセーブポイント風の魔法陣 - ICS MEDIA
昨今のWebサイトではWebGLを利用した3Dコンテンツをしばしば見かけるようになってきました。WebGLに対応した端末が普及してきていることや、Three.jsなどのライブラリが充実していることもあり、実案件での採用が現実的になってきているからです。 しかし、いざ3Dコンテンツを作ってみると、どこか味気のないものになってしまう事があります。そんな時はエフェクトの追加をオススメです。エフェクトを追加することで、コンテンツの見栄えが派手になったり、キャラやゲームの状態が伝わりやすくなります。今回エフェクトの例として、RPGのセーブポイントや回復ポイントで使用されそうなデモを制作してみました。 デモを別ウインドウで再生する ソースコードを見る ※このデモはThree.js r146とTypeScript 4.9によって書かれています。 本記事では、セーブポイント風なエフェクトの作成を通して、T
Introducing Tokyo WebGL Meetup.
こんにちは、Gaji-Labo 雑用担当の @neotag です。 この記事は Gaji-Labo Advent Calendar 2015 3日目の記事です。 今回は僕が参加している Tokyo WebGL Meetup というコミュニティのご紹介をしようと思います。 Tokyo WebGL Meetup はその名の通り東京ベースの WebGL 関連のコミュニティです。 ピクセルグリッドの @yomotsu さんを中心に、面白法人カヤックの @edo_m18 さん、ゲームエンジニアの @mattari_panda さん、wgld.org の @h_doxas さん 、 @neotag で主催しています。 ※僕はもっぱらイベントの裏方を担当しています。 身内で勉強会をやるだけでなく100人前後のイベントを開いたりしています。 最近は WebGL とセットで WebVR 熱も加熱していたりし
WebGL best practices - Web API | MDN
この文書は WebGL を使ったコンテンツの向上のための Tips について書きます。これらの提案に従うことで、多くの機器への互換性を高めたり、パフォーマンスを上げることにもなります。 WebGL のエラーを出さないように注意しましょう。エラーは getError() で得られますが、Firefox では webgl.verbose の設定を有効にすることで、ウェブコンソールに WebGL のエラーと警告を出力します。ユーザーのコンソールにエラーを吐き出す必要はないでしょう？（訳註：パフォーマンスの理由もある。下参照） #ifdef GL_ES は絶対に使ってはいけません。初期の例ではこれが使われていましたが、WebGL では必ず true になるので必要ありません。 フラグメントシェーダで highp 精度を使うのはやめましょう。mediump を代わりに使いましょう。highp を使う
WebGLStudio
3D Development environment for the web. WebGLStudio (formerly known as WebGLStudio) is a platform to create interactive 3D scenes directly from the browser. It allows to edit the scene visually, code your behaviours, edit the shaders, and all directly from within the app. Try WebGLStudio.js Example Source on GitHub Documentation Learn or you can use the latest version (more features and more bugs)
えっ!? WebVRってそういうこと？ サイト自体をVRで楽しめる「カヤックVR部」サイト - WebGL 総本山
今まさに隆盛の VR コンテンツがカヤックから登場！ 今回は、カヤックのエンジニアで @edo_m18 の HN でお馴染みの比留間さんから寄稿をいただきました。 カヤックではつい先日、VR 部という新しい活動をスタートしています。カヤックのエンジニア自身の言葉で語られるカヤック VR 部とは？ ぜひご覧になってみてください！ 先日公開されたカヤックVR部のサイト。実はこのサイト自体がWebVR化されており、Oculus Riftやハコスコ（スマートフォン向け簡易VRグッズ）を使うことで今話題の「VR」を手軽に楽しむことができるようになっています。 いっけん普通のサイトだけど実は… カヤックVR部のサイトにアクセスするとまず、ノイズでちりちりと動く「VR部」という大きなロゴが目に入ります。 その下にはOculus Riftの画像が続き、そのままカヤックが手がけたVRコンテンツの数々が動画や
WebGL スクール第２期の募集を開始します！ 2015年5月開講！ - WebGL 総本山
受講希望者の募集を開始します！ WebGL を基礎からしっかり学べる 本格 WebGL スクール の第二期を開催します。 第一期は、平日の夜間に 2 時間 30 分というスケジュールで全 12 回を開催しました。第二期となる今回は、開催曜日を土曜日に変更し講義の時間も延長、より多くの人に参加していただきやすい形にスケジュールを見直しました。 よりピンポイントに 一度の講義でより実践的なスキルを得られるよう 工夫し、講義内容も第一期の反省点を盛り込み改良しました。 講義の開始時期はゴールデンウィーク明けの 5 月中旬からになります。また、スクールの初回は 体験会 として、スクールの雰囲気を肌で感じていただけるようにするつもりです。WebGL にちょっとでも興味があるなら、少しだけお付き合いいただき下記詳細をご覧ください。 スクール概要 iOS が対応したことにより、PC だけでなくモバイルの
The Book of Shaders
by Patricio Gonzalez Vivo and Jen Lowe This is a gentle step-by-step guide through the abstract and complex universe of Fragment Shaders. Contents About this book Getting started What is a shader? “Hello world!” Uniforms Running your shader Algorithmic drawing Shaping functions Colors Shapes Matrices Patterns Generative designs Random Noise Cellular noise Fractional brownian motion Fractals Image
独学で 1 ヶ月間 OpenGL を学んで得た基礎知識のまとめ ~ 2D 編 ~ · けんごのお屋敷
OpenGL。その単語の響きだけで素晴らしく魅力的に思える 3D コンピューターグラフィックスライブラリは、これまで何人もの駆け出しゲームプログラマーに幾度と無く挫折を味わわせてきた。「ゲーム作るならやっぱり高速に描画できる OpenGL でしょ。でも自分が作るゲームに 3D はいらないし、しかも難しそうだし、別に 2D 描画だけできればいいや」 と、軽い気持ちで手を出したのが運の尽き、世の中そんなに甘くはなかった。OpenGL というその難攻不落城は私達の進む道を阻むように高々とそびえ立っている。 OpenGL がコレほどまでに取っ付きにくいのは 気軽に Hello World できない からなんじゃないかと思う。OpenGL の場合だとそれは何かしら 1 つの図形を表示することにあたるのかな。でもたったそれだけなのに、覚えることが山ほどありすぎて全然本題にたどり着くことができないし、O
画像加工ソフトの手軽さで、写真1枚から3Dモデルを作れる「Smoothie-3D」 | マイナビニュース
1枚の写真や2D画像から、画像加工ソフトのようなユーザーインターフェースで、手軽にフルカラーの3Dモデルを作成できる無料のWebアプリケーション「Smoothie-3D」が先ごろ公開された。 Smoothie-3Dは、HTML5／WebGLをサポートするWebブラウザ（Internet Explorer11、Chrome、Firefoxなど）でSmoothie-3DのWebサイトにアクセスし、ログインして利用するWebアプリケーションだ。登録にはメールアドレスと名前、パスワードだけでよい。 まず3Dモデリングしたい対象を含んだ画像ファイル（背景は気にしなくてよい）をアップロードする。そして、マウスポインタで3D化したい部分を適当に囲って指定し、ワンクリックで画像から飛び出したかのように立体化できる。その後で、各部分の大きさ、太さ、角度などはマウスを使って調整していくという流れだ。3Dモデリ
NASA 公式の様々な宇宙に関するデータがダウンロード可能！ 3D モデルデータや画像が多数！ - WebGL 総本山
あの NASA が提供する 3D モデルデータ！ 今回ご紹介するのは、宇宙に関連する多くのデータを、あの NASA が公開している NASA 3D Resources です。 3D のモデルデータはもとより、テクスチャとして利用できる画像なども公開されていて、しかも種類が結構あります。 これは宇宙ファンならずとも気になるところです。 モデルデータの形式などに統一性は無し データを提供しているのは必ずしも NASA だけではないようなので、データの形式やサイズにはあまり統一感はありません。 ライセンス周りは統一されている(基本ライセンスフリーっぽい)ようですが、モデルデータの形式などはそれぞれ事前にチェックしたほうがよさそうです。 3ds、fbx、obj などが多そうな印象。 とにかく配布されているデータの種類が豊富なこのサイト。 3D モデルがアルファベット順に並んでいます。 ラインナップ
WebGL + pex で実現した Deferred Rendering のチュートリアルが秀逸！ - WebGL 総本山
遅延レンダリングを WebGL で！ 3D プログラミングの分野には、いわゆる遅延レンダリングと呼ばれている手法があります。 英語で表記すると Deferred Rendering ですね。 この方法は、MRT(Multi Render Target)と呼ばれる技術を用いて実現するのが一般的であり、WebGL は MRT をサポートしていません。今回紹介する方法はそれとは違ったアプローチで、同様の結果を実現しているサンプルです。 実際に実行できるデモへのリンクもありますので、ぜひチェックしてみてください。 そもそも Deferred Rendering とは？ 遅延レンダリング、または遅延シェーディングと呼ばれる技法は、従来の WebGL の一般的なレンダリング技法とはちょっと違います。 誤解を恐れずにものすごくざっくりと説明するなら、遅延レンダリングとはポストエフェクトのようなもので、ジ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Graphtoy
フラグメントシェーダの実装チュートリアルや小さなデモが多数公開されているブログ xdPixel - WebGL 総本山
“ニコニ立体”で外部プラグインの導入が不要のWebGL版プレイヤーが提供開始
http://marcinignac.com/blog/pragmatic-pbr-intro/materials/
Lebarba