2016/02/14 シェーダだけで世界を創る!three.jsによるレイマーチング GPU の熱でチョコも溶けちゃう!? GLSL シェーダテクニック勉強会 @gam0022Read less
はじめに この記事では、WebGL 2.0について概要レベルで説明します。 「あれ? いつもみたいに細かくやらないの?」というツッコミもあるかもしれませんが、本記事、実は私が最近始めた「WebGL Learning Path JP」というWebGL学習支援紹介サイトのコンテンツの一部としてリンクすることを前提にしているものですので、そんな流れになっています。 そのうち細かい説明も別の記事でやるかもしれませんが…、ひとまず今回は概要レベルです。 すでに概要を説明されている先人がいた…。 皆さんご存知、WebGLといえば学習スクール等も運営されている @doxas さんが、かなり昔にWebGL 2.0についてのスライドを公開されています。 当時から目をつけてたって、すごいよ…。 WebGL 2.0の概要:「WebGL 2.0 は WebGL 1.0の増強版だ!」 @doxasさんのスライドと同
本サイトでは、WebGLを学びたい人に段階的にスムーズに学習していただけるよう、最適な学習経路をご紹介します。
はじめに みなさんこんにちは。エマ・デュランダルさんです。 最近、WebGL関連のQiita記事を良く書くようになってきました。 WebGLはただなんとなく使う分には楽ですが、複雑な3Dの世界を作ろうとすると、思いの外パフォーマンスが出ないことがあります。 「Three.jsでやるとこんなに速いのに、どうしてWebGLを直接使うとこんなに遅くなるんだろう」という経験をされた方も多いかもしれません。 こうした世のWebGLライブラリには、たくさんの高速化のノウハウが詰まっています。 それらのうちの幾つかの技法を知ることで、あなたのWebGLアプリケーションも確実に高速化することができます。 本記事では、その技法の一つ、WebGLの拡張機能である「ジオメトリインスタンシング(ANGLE_instanced_arrays)」について、ご紹介したいと思います。 基本的な考え方 さて、「インスタンシ
はじめに 皆さんこんにちは! 日本のWebGL界において、意識高い系WebGLおじさんとして知られるエマ・デュランダルさんですよ!(挨拶) さて、皆さんWebGL楽しんでますか? WebGLはネイティブのOpenGLと違い、glGetErrorとかglShaderInfoLogとかで明示的にエラー確認を行わなくても、エラーが発生した際はブラウザが親切にちゃんとコンソールにエラーメッセージを出してくれます。 非常に3Dプログラミングしやすい環境だと思います。 それでも、「どうしてもこのエラーが取れない!! 正しくWebGLのAPIを呼び出してるはずなのに、どうしてエラーが出るの!? 亡霊かよこのエラー!」っと叫びたくなる時もあるものです。 どうしてか。大抵の原因は、WebGL(及びそのベースとなったOpenGL ES)のAPIについての理解不足にあるんです。 おやおや、今日もWebGLで悩め
なんか書き残しておきたくなったので、唐突にブログを書く。 プロ野球選手のイチローが、42 歳でメジャーリーグ記録に迫る勢いで今でも活躍しているというニュースをたまたま見かけた。 仮に私の体にイチローの魂が突然宿ってしまったらどうなるだろう……というめっちゃどうでもいいことを考えた。たぶん、明日の朝、私は早朝ランニングをしていると思う。そこまで想像した時に考えたのは、やっぱりすごい人にはすごい理由があるんだよなってことだった。同時にきっと、よく言われていることではあるけど遅すぎるってことはないんだろうなとも思った。 すごい人には、すごいと言われるだけの理由がある。 だから例えば、すごいと言われたいのなら、すごいと言われるだけの努力や生き方が、キレイ事じゃなくてやっぱり必要なんだと思う。 でも、努力してがんばってすごいと言われるのって実は本質から外れているような気がする。 たぶん、好きでやって
この記事は 2016 年 1 月 22 日にポストされた “WebGL Off the Main Thread” の抄訳です。 Firefox 44 以降で、WebGL を Web Workers で利用出来るようになりました!OffscreenCanvas API を利用することで、メインスレッド以外で利用可能な WebGL コンテキストを作成できるようになります。 以下の例を実行するためには、Firefox 44 以降が必要です。現在のところ Firefox Developer Edition もしくは Firefox Nightly が該当します(訳注:記事執筆当時。現在はリリース版の Firefox でも利用可能です)。また API は利用するためには about:config から gfx.offscreencanvas.enabled の値を true に設定する必要があります
注意 現在X(旧Twitter)でのソーシャルログインができない事象を確認しています。事前にX(旧Twitter)側で再ログインした上でconnpassのソーシャルログインを行うか、 「ユーザー名(またはメールアドレス)」と「パスワード」の組み合わせでのログインをお試しください。合わせてFAQもご確認ください。 お知らせ 2024年9月1日よりconnpassサービスサイトへのスクレイピングを禁止とし、利用規約に禁止事項として明記します。 9月1日以降のconnpassの情報取得につきましては イベントサーチAPI の利用をご検討ください。 お知らせ connpassではさらなる価値のあるデータを提供するため、イベントサーチAPIの提供方法の見直しを決定しました。2024年5月23日(木)より 「企業・法人」「コミュニティ及び個人」向けの2プランを提供開始いたします。ご利用にあたっては利用
ALVRアプリが公開!SteamVRゲームがVision Proでプレイ可能に MRVRAppleVision ProAR 17時間前 名酒センター「酒マルシェ」を6/25に開始!そらのうえショッピングモール ベネリックデジタルエンターテインメント株式会社名酒センター酒マルシェVRスマホVRイベントメタバースそらのうえショッピングモール 2024/06/21 18:00 VRChatに「VRC-JP 初心者プラザ」公開!Discordコミュニティ「VRC-JP」 VRVRchatイベントメタバース株式会社VVRC-JPVRC-JP 初心者プラザ 2024/06/20 18:00 「xambr」がアップデート!アバター対応や出展ブース入稿システムなど実装 xambrVRイベントアプリambr株式会社ambrメタバース 2024/06/20 18:00 「ホロアース」Ver.0.8.0アップデ
昨今のWebサイトではWebGLを利用した3Dコンテンツをしばしば見かけるようになってきました。WebGLに対応した端末が普及してきていることや、Three.jsなどのライブラリが充実していることもあり、実案件での採用が現実的になってきているからです。 しかし、いざ3Dコンテンツを作ってみると、どこか味気のないものになってしまう事があります。そんな時はエフェクトの追加をオススメです。エフェクトを追加することで、コンテンツの見栄えが派手になったり、キャラやゲームの状態が伝わりやすくなります。今回エフェクトの例として、RPGのセーブポイントや回復ポイントで使用されそうなデモを制作してみました。 デモを別ウインドウで再生する ソースコードを見る ※このデモはThree.js r146とTypeScript 4.9によって書かれています。 本記事では、セーブポイント風なエフェクトの作成を通して、T
基礎から応用までを網羅する 2014 年より開催している WebGL スクール。その第三期の募集を開始します。 これまでの WebGL スクールでは doxas こと私、杉本 雅広が講義を単独で行うスタイルが基本でした。今回はなんと WebGL や three.js、そして WebVR に熟練した特別講師が本スクールの講義に参加します。 これまでの WebGL スクールに比べ、より多くの刺激やインスピレーションを得られる環境を用意しました。 興味のある方は以下、概要等をよくお読みいただき参加をご検討ください。 WebGL 基礎スクール(本講義) 今回の WebGL スクールも、これまで行ってきた第一期、第二期同様に、WebGL を基礎からしっかりと身につける ことができるスクールとなっています。 スクールの講義は、wgld.org や、当サイトの運営を行っている杉本 雅広が責任を持って担当
top 2015 年 12 月 これが世界最高峰の GLSL シェーダデモか! 質感にもこだわりを感じる驚きの GLSL 作品 Snail がすごい! 並の PC では滑らか再生は難しい 今回ご紹介するのは、ShaderToy に投稿された驚きの GLSL シェーダデモ作品です。 当サイトではこれまでにも ShaderToy の作品をご紹介したことがありましたが、正直言って、あのサイトには驚きのデモが本当にたくさんあります。そんな中でも、今回のデモには一種突出した、よくわからんけどとにかくすごい感 がありますね。 この作品を投稿したのは、なんと ShaderToy の生みの親である iq さんです。彼はレイマーチングに関する多くの文献を公開するなど、この界隈ではかなり有名なエンジニアです。 質感も見事なカタツムリ! 今回の作品には Snail というタイトルがつけられています。 デモを見れ
概要 WebGL Advent Calendar 2015 の24日目の記事です。 WebGLライブラリのjThree v3を使ってみます。 jThree v3とは v2までは、Three.jsに依存するライブラリでした。 今回 v3(version 3)は、v2の誰でも3Dオブジェクトを簡単に作成でき、操作できるという意思を引き継ぎ、Three.jsから完全に切り離れ、WebGLをネイティブで扱うようになりました。 そうすることでThree.jsでは出来なかったこともできるようになり、上記のようなjThreeの意思を実現できるようになります。 ※v3は現在、正式版ではなく開発段階です。 v3のメインコミッターの記事です。 WebGLライブラリ向けのDeferred Renderingにおける動的ライト、シャドウマップの実装法について[jThreeガチ勢向け(?)] [jThree] We
3D みたいだけど 2D なんだけどやっぱりよくみたら 3D なんだけどでもやっぱり 2D なんだけどでもよくよく考えてみたらこれって GLSL 使ったレイマーチングなんじゃね?WebGLGLSL WebGL Advent Calendar 2015 の 21 日目の記事です。 ごあいさつ みなさんこんばんは!! 🌙 ムーン! 今年はお正月に連休とっていいらしいということで人生初と言っても過言ではないとても一般的な年越しができそうなことを本気で嬉しく感じております doxas ともうします! 🎍 さて、今年の WebGL アドベントカレンダーはとてもガチな人たちがたくさんの有用な記事を書いてくださっており、超個人的な感想をいきなり捩じ込みますがわたくしとても嬉しいです。 思えば 3 年ほど前、wgld.org を書き始めたころは WebGL というと動作も不安定で、本当にマニアみたいな
WebGLライブラリ向けのDeferred Renderingにおける動的ライト、シャドウマップの実装法について[jThreeガチ勢向け(?)]WebGLjThree これはWebGL Advent Calender(http://qiita.com/advent-calendar/2015/webgl )16日目の記事です。 僕は普段jThreeというOSSなライブラリの新バージョンを作ることをしている。この新しいjThreeのv3であるがWebGLにおける新たなライブラリのあり方を定義しようという思いを持って開発は行われている日本発のOSSなWebGLライブラリである。 このjThreeは今までのjThree v2のいいところを継承しながら、three.jsやその他のライブラリとはまったく違う側面を持ったライブラリである。その用途は比較的ゲーム向けではなく、Webサービスの一部として融
[この記事は、米国 Mozilla の Future Releases Blog に掲載された "Mozilla-pioneered asm.js and WebGL achieve milestone as the Unity game engine provides full support for WebGL titles" の抄訳です] とても良いニュースがあります。長年のパートナーである Unity が WebGL への出力を Unity 5.3 から正式にサポートする、と本日アナウンスしました。この技術を利用したゲーム開発を完全にサポートするために、Unity とブラウザベンダーは半年以上にわたって質とパフォーマンスに関する問題の解決に努めてきました。この記事では、Web におけるゲームを実現するために行った、Mozilla のさまざまな活動についてご紹介します。それを一言でい
この記事はWebGL Advent Calendar 2015の9日目の記事です。 ご注意 本記事は2015年当時に書いた記事なのですが、GPUがGeForce 8x00シリーズ以降、SIMDからSIMTという並列実行形式に切り替わった頃から状況が大きく変わりました。 以前は本記事でも紹介するインターリーブ形式の頂点データの方が高速だったのですが、現在のGPUでは多くの環境で非インターリーブの方が高速とされています。 AMD GPUにおいても、GCNアーキテクチャ(PS4以降の世代)から(それまでのVLIWから)SIMTに切り替わり、非インターリーブを推奨されているようです。 WebGLは基本的にネイティブ3D APIへのマッピングに過ぎないため、この傾向はおそらくWebGLでも同様と考えられます。 とはいえ、インターリーブ(AoS)や非インターリーブ(SoA)はCGをやる上でいずれ避けて
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く