サンプルで理解するWebGL 2.0 - Transform Feedbackによるパーティクル表現 - ICS MEDIA
ブラウザからハードウェアアクセラレーションを使用してリッチな表現を実現できるWebGL。その新たなバージョンであるWebGL 2.0はChromeとFirefoxで標準で利用でき、次世代のウェブ3D表現技術として注目されています。 前回の記事では一度のドローコール（描画命令）で複数のテクスチャーに別々の情報を同時に描画（出力）できるMultiple Render Targets（マルチプル・レンダー・ターゲッツ）について紹介しました。連載の最後となる本記事では同じくWebGL 2.0で追加された代表的な機能であるTransform Feedback（トランスフォーム・フィードバック）についてデモを交えて紹介します。 Transform Feedbackによるパーティクル表現 Transform Feedbackを使うと下記のデモのような表現が可能です。 デモを別ウインドウで再生する ソース
JavaScriptからGPGPU（WebGL2）を利用する＆パーティクル描画
WebGL2ではTransformFeedbackという機能が使えるようになりました。TransformFeedbackがあればGPUでの計算結果をバッファに書き出すことができるようになります。これを使えば、なかなか面白いことができるようになります。 この記事では、TransformFeedbackを利用したGPGPUと、パーティクル描画について解説します。 前提知識 この記事では、WebGL2について、基礎的な知識を持っていることを前提としています。まだWebGL2に慣れ親しんでいない人は、以下の記事を参考にしてください。 WebGL2入門 基礎編 また、WebGL1/WebGL2について、@h_doxas様がwgld.orgという解説サイトを開いています。そちらも参考にしてください。 wgld.org ソースコード この記事で使われているプログラムの完全なコードはGithubに置いてあ
Three.jsでCurl Noise - Qiita
はじめに GLSLを触り始めるとやっぱりやりたくなりますよね。Curl Noise。 残念なことにWebGLではまだCompute Shaderは対応されてない状況です。(WebGL2.0から対応するらしい） ですが、Three.jsにはGPUComputationRendererというものございまして、誰でも簡単に粉を飛ばせます。 今回作成するものです。gitはこちら。 また、今回はCurl Noiseの説明というよりかはThree.jsでGPUComputationRendererを使ってGPGPUをすることについて解説します。 実装の大まかな説明 Curl Noiseのようなパーティクルは少なくとも1万くらいのパーティクルを出すことが多いですが、普通にThree.jsでオブジェクトを生成、位置の更新を行うと非常に重い、というか生成すらままならないかもしれません。 そこで、GLSLの出
CUDAとOpenCLどっちがいいの？ - Qiita
TL;DR: そもそも単純に比べんな。ナイフとノコギリがどっちがいいかなんて一概には言えないだろう？ Twitterに書いたら思ったより反応されてるので、もうちょっと解説も兼ねて書いておきます。 なお、この話はtweetにもある通り某所で発表したやつの公開版です。前にも観たって方は内緒にしておいてください。 あと、若干、個人的な偏見を含んでいるかもしれませんが、そのあたりは頑張ってフィルターかけてください。 GeForceやTeslaといった、NVIDIA社のGPUでGPGPUしたい人がまず使うプログラミング環境。実質的にGPGPU界の頂点であり最強であることは否定できません。 ただし、NVIDIAがベンダーロックしていて、標準化はされていません（一応、CUDAのモデルはロイヤリティーフリーで使っても良い）。 CUDA Cという独自拡張されたC言語で、デバイスとホストを同じ.cuファイルに
毎日GLSLでアニメーションを作ってる - マルシテイア
最近GLSLやWebGLの世界に入門して、毎日こんなアニメーションを作っている。 4月末、東京に出張する機会があり、ついでに何か面白いイベントや展示がないか探していると、チャネルというイベントを見つけた。 以前から気になっていたBRDG/VRDG方面のイベントらしい。 会場は六本木のSuperdeluxe。出張先のオフィスからも近いので、少し早退して行ってみる事にした。 そこではハードな電子音に合わせて、GLSLやHaskellのライブコーディングによるVJが行われていた。 先週末に開催したチャネル#16 のライブ映像を公開しました。 https://t.co/YgpC3YYC0B #unity3d #tidal #maxmsp #tokyo #BRDG #livecoding #kodelife pic.twitter.com/rWaHodipUA— BRDG / VRDG (@toky
Geometry Shaderのサンプルを解読する（初級編） - Qiita
はじめに Unityでかっこいいエフェクトを作りたい！！ keijiroさんのエフェクトがめっちゃカッコ良いから参考にしたい！！ でもテクニックが上級すぎてソース見ても全然わからない！！！！（ごめんなさい） という経験、Unity勢のみなさんなら一度は通ったことがあるのではないでしょうか…？（暴論） この記事では、（主に自分が）そんな状態を脱するべく エフェクトの中でよく使われている Geometry Shader というシェーダーを理解して、 カッコいいエフェクトを作れるようになるための一歩を踏み出します！ ※ 備忘録的に書いているので、説明を一部省略してしまっているところがあります。ご了承ください。 Geometry Shader とは 簡単に言うと、プリミティブ(メッシュを構成する基本形状)の増減や変換ができるシェーダーです。 Vertex Shader の後、Fragment Sh
WebGPUでガチリアルタイムレンダリングの世界が見えてきた - Qiita
ここ数年、Qiita上ではもっぱらポエムを生業としつつあります。@emadurandalです。こんにちは。 本記事ではWebGPUのWeb3Dにもたらす意味や効果について語っていこうと思います。とってもポエミーです。よろしくお願いします。 （なお、現時点でのWebGPUでは未対応で、将来的なサポートが議論されている未来の機能を前提にした話もしています） なぜWebGPUが必要とされているのか そもそもなぜ、WebGPUなのでしょうか。別にWebGLのままではいけないのでしょうか。 OpenGLは4.x世代が引き続きアップデートを続けていますし、OpenGL ESも3.x世代がコンピュートシェーダーを獲得するなど進化を続けています。それをベースにWebGL2とかWebGL3とかで順当にアップデートしていけば良いのではないでしょうか？ そう思う方も多いでしょう。 しかし世の中を見渡すと、Web
シェーダー芸人になりたかった6か月前の自分に教えてあげたいリンク集 - Qiita
この記事は、KLab Engineer Advent Calendar 2018 10日目の記事です。 はじめに 今月頭の12/1から12/2にかけて、日本で唯一のデモパーティであるTokyo Demo Fest 2018が開催されました。 デモパーティをご存じではない方のために、公式サイトから引用します。 デモパーティは、コンピュータを用いたプログラミングとアートに 興味のある人々が日本中、世界中から一堂に会し、 デモ作品のコンペティション(コンポ)やセミナーなどを行います。 また、イベント開催中は集まった様々な人たちとの交流が深められます。 またデモについて詳しく知りたい方はこちらをご覧ください。 今回私は、このパーティのGLSL Graphics CompoというGLSLコードのみで映像を作って競うコンポにTraveler 2という作品を応募して1位に選んで頂きました！ #Tokyo
「POOL」のコンセプト・技術解説
2019/09/12～25までFabCafe TokyoでおこなれたNEORTの展示「NEORT：Neo Visual Art Collection」 のために制作した作品「 POOL」のコンセプトや技術について解説します。 展示ではフレームレートが安定せずに動きが少しカクついていたので、動画にしたものも置いておきます。 (テスト不足でした。申し訳ないです。) 今回制作した「POOL」は過去にNEORTに投稿した作品で試してきた表現や技術を使用しているので、それらの作品も適宜紹介していきます。 コンセプト コンセプトらしいコンセプトもないのですが、強いて書くとすれば「3DのBoidsをフォトリアリスティックにかっこよくレンダリングする、あとジェネっぽい要素も入れる」になります。要は自分の好きなもの(シミュレーション, 3D CG, Generative Art)を全部盛り込んだ作品というこ
Intro to Pixel Shaders in Three.js — Airtight Interactive
I recently started playing with shaders in three.js and I wanted to share some of what I’ve discovered so far. Shaders are the ‘secret sauce’ of modern graphics programming and understanding them gives you a lot of extra graphical fire-power. For me the big obstacle to learning shaders was the lack of documentation or simple examples, so hopefully this post will be useful to others starting out. T
安定しないフレームレートに効果的！ WebGLのカクつき対策まとめ（Three.js編） - ICS MEDIA
ウェブコンテンツで3Dを扱える技術としてWebGLがあります。WebGLを利用すればブラウザ上で華やかな表現を実現できます。しかし、コンテンツの内容によっては処理負荷が高くなり、カクつきが生じる場合があります。カクつきはコンテンツの見栄えを損なわせ、作り手の想定とは異なる体験を与えてしまう可能性があります。そのような場合の対策として、本記事ではWebGLのカクつき解消方法をいくつか紹介します。 解説用にカクつきの起こりやすい高負荷なデモを用意しました。本記事で紹介するカクつき解消方法はこのデモで実際に体験できるので、読み進めながら同時に触れておくとイメージがしやすいと思います。 デモを別ウインドウで再生する ソースコードを確認する ※このデモはThree.js(r141)とTypeScript 4.7とwebpack 5で作成しました。開発環境の構築は記事「最新版TypeScript+We
オフスクリーンキャンバスを使ったJSのマルチスレッド描画 – スムーズなユーザー操作実現の切り札 - ICS MEDIA
OffscreenCanvas（オフスクリーンキャンバス）はWeb Workers（ウェブワーカー）を使用してWorkerスレッドで描画処理を行える機能です。負荷の高い描画処理をWorkerスレッドに移動することで、メインスレッドの負担が軽くなり、余裕ができます。これによりメインスレッドでスムーズなユーザー操作を実現できるようになり、ユーザー体験の向上が期待できます。本記事ではOffscreenCanvasについて機能と使い方を解説します。 ▲ OffscreenCanvasを使用したデモ。OffscreenCanvasを使用すると、Canvasへの描画負荷が高い場合でもスムーズなユーザー操作とCSSアニメーションの再生を実現できる JavaScriptでマルチスレッドに処理を実行できるWeb Workers OffscreenCanvasの説明の前に、まずはWeb Workersについて
OpenGLに入門する前に知っておきたかったこと - かみのメモ
はじめに 最近、とある事情でOpenGL+GLSLの勉強をしていました。 目標はシェーダーを自分で書いて簡単な光路追跡法（レイトレーシング）っぽい処理を実装することだったので、とりあえずネットの情報と↓の本を使って勉強してみました。 OpenGL 4.0 シェーディング言語 -実例で覚えるGLSLプログラミング- 作者:David Wolff発売日: 2012/11/01メディア: 大型本 が、OpenGL難しい！！ 自分の環境に入っているOpenGLのバージョンを調べるとこから始めて、目標の処理を実装するまで2週間以上かかってしまいました。。。 ということで、この記事では自分がOpenGLに取り組んでみて「勉強前に知っていたら捗ったのになあ」と思ったことについてまとめたいと思います。 新しくOpenGLを勉強するときの取っ掛かりになれば幸いです。 ※ 2018/09/13：項目1のタイト
THREE.MeshLineで、ヌルヌル動く線を作ろう！ - Workship MAGAZINE(ワークシップマガジン)
デモページ ソースダウンロード 線を使ったアニメーションは、流れ星や紙吹雪、風の動きなど、さまざまなモチーフの表現をより豊かにしてくれます。 今回はTHREE.MeshLineを使い、リボンのように滑らかに線が動くアニメーションを作る方法を、5つのデモとともにご紹介します。オリジナルのアニメーションを作る際は、ぜひ参考にしてみてください。 THREE.MeshLineとは 筆者は2年前から、Jaume Sanchez EliasがThree.js用に作成したライブラリ『THREE.MeshLine』を使用して、WebGLでヌルヌルと動く線を作りはじめました。 THREE.MeshLineの特徴は、Three.jsが長年抱えてきた「線の幅が変更できない」という問題に取り組んでいる点にあります。MeshLineは、幅のパラメーターをサポートしていないGL_LINEメソッドのかわりに、ビルボード
Depth of Field · inconvergent
The 3D webs in the previous post are represented as graphs. Rendering them in 3D presents a few challenges. Depending on what tools you use, you might be able to convert them into meshes. There are several other ways to do it as well. The following is the outline of the method used to render the webs, as well as the images you see here, that does not involve building meshes. It should work for a w
WebGLコンテンツの開発フローと抑えどころ - KAYAC engineers' blog
こんにちは！WebGLおじさんことふかぽんです。 WebGLの案件に関わらせていただくことが多く、「サマーウォーズTV連動特設サイト」や「シン・アリマ」などの案件でもWebGL周りを担当させていただいています。 www.kayac.com www.kayac.com 過去のアドベントカレンダーではこんなことを書きました。かれこれ4年連続の出場です。 2015 ... WebGLも怖くない！canvasライブラリを効率良く学ぶオススメの順番 2016 ... 【脱・gulp】npm-scriptsでシンプルなフロントエンド開発環境を作る 2017 ... 【WebGL】シェーダーを使って3D空間でスプライトアニメーションさせる 前置き WebGLコンテンツの開発をさせていただくことが多かったり、社内でWebGLの勉強会を開いたりもしているのですが、ある日ふと、とある技術やテクニックにフォーカ
GLSLで音を作るために 番外編 - らくとあいすの備忘録
こんにちは。らくとあいすです。 「GLSLで音を作るために」第二回の前にしてさっそく番外編となってしまいました。 今回は5/30に twigl.app及びVRChat上のクラブで配信したGLSLサウンドを用いたDJについて、記憶の新しいうちに書いておきます。 性質上、ここでは1mixしか聴けませんがライブ時に使用したURLを載せておきます。 これ自体を解読することはあまりオススメしませんが...。 twigl.app やったこと GLSLを用いて、僕の好きな曲や自分の曲を作りこみ、そしてそれをライブで繋いだり混ぜたりするDJのような形式で発表しました*1。 これは、1. 各トラックの作りこみ、2. 作ったトラックを使ったDJ風プレイの大きく二つの工程に分けられます。1については、書くことが膨大過ぎる上にケースバイケースなので、本記事では概略に触れるに留めます*2。2については、GLSL特有
How to hack VS Code: evil ways (Japanese)
Presented at Kyoto.js 15 https://kyotojs.connpass.com/event/113442/
[Three.js] Three.jsでシェーダー入門 - Qiita
はじめに デモページ Three.jsやBabylon.jsのようなWebGLライブラリで、シェーダーを利用すると表現力が向上します。 シェーダーは難解です。これから学習を始める人にとって、どこから手をつけていいのかわからなくなります。WEB上にはシェーダーを扱ったさまざまな記事がありますが、どのような読者を想定して書かれているかは千差万別です。著者が想定している前提知識を持っておらず、読者が内容を理解できないことがあります。 この記事ではThree.jsを利用することを前提に、シェーダーを利用してマテリアルを自作するまでの方法を解説します。 上の2つのリポジトリは、私がシェーダーの学習の過程で製作したものです。先頭のGIFアニメの元のマテリアルもこのリポジトリで公開しています。ご参考までに。 想定する読者 この記事は 現在Three.jsを利用している。 WebGL, GLSLの知識はな
![[Three.js] Three.jsでシェーダー入門 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/25fdebf9c75e67ff02fb924172359a42d4012cfa/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCVGhyZWUuanMlNUQlMjBUaHJlZS5qcyVFMyU4MSVBNyVFMyU4MiVCNyVFMyU4MiVBNyVFMyU4MyVCQyVFMyU4MyU4MCVFMyU4MyVCQyVFNSU4NSVBNSVFOSU5NiU4MCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9OGRhYTY4ZmI4Njc5OGE4ZjA5NDNkNDNkYjFlMmJmMDY%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwbWFzYXRvX21ha2lubyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZjE3ZWM2YzBmM2NmMjExYzgwZDQyZDE4MWMwMDlmODU%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D89cf58fa9de59afab5e8ede84fe4b34a)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
高橋 啓治郎 | Unity Learning Materials
