[WebGL] GPU でベジェ曲面をものすごい勢いで描く - Qiita
WebGL Advent Calendar 14日目の記事です モチベーション WebGL こそ曲面が活躍するプラットフォームだと思うわけです。なぜなら少ないデータで綺麗な面が描画できるからです。100Mバイトもするような大量の三角形をサーバからいちいち送ってる場合ではありませんし、それをアニメーションで変形させるとなれば大変な話です。 そこでまず、どうやって曲面を WebGL で描画するのか考えてみます。曲面と言ってもいろいろあるわけですが、モデリングの自由度などを考えるとやはり最終的にはサブディビジョンサーフェスなりを描画したいという目標があります。そのためにはベジェパッチを描画できることがひとつ有力な選択肢としてあると思います（詳しい説明は CEDEC2015 サブディビジョンサーフェスのすべてがわかる をごらんください） 完成した動くデモはこちら http://takahito-t
![[WebGL] GPU でベジェ曲面をものすごい勢いで描く - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/7fcbb142af1e272a216f14c19b38d9addfcf7050/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-7940cd1c8db80a7ec40711d90f43539e.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCV2ViR0wlNUQlMjBHUFUlMjAlRTMlODElQTclRTMlODMlOTklRTMlODIlQjglRTMlODIlQTclRTYlOUIlQjIlRTklOUQlQTIlRTMlODIlOTIlRTMlODIlODIlRTMlODElQUUlRTMlODElOTklRTMlODElOTQlRTMlODElODQlRTUlOEIlQTIlRTMlODElODQlRTMlODElQTclRTYlOEYlOEYlRTMlODElOEYmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTU4YmU1ZDU3MmEzYzdmNDY0NGJiYjYwOGRlOTJlMzRm%26mark-x%3D120%26mark-y%3D96%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9OTcyJnR4dD0lNDB0YWthaGl0by10ZWppbWEmdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTNmOWUyMDVlNmIwYzc5NTViN2U1NTliZjlkOGRhYjE1%26blend-x%3D120%26blend-y%3D500%26blend-mode%3Dnormal%26s%3Da840296600c7256eb130f8fdc12521c2)
WebGL - これがGPUの力！Three.jsによる“リアルタイム”なレイトレーシング - Qiita
これはWebGL Advent Calendar 15日目の記事です。 【2016/01/29 追記】続編である「これがGPUの力！three.jsによる“リアルタイム”なレイトレーシング 〜宝石編〜」を公開しました。 はじめに Three.jsからGPUをつかって、リアルタイムなレイトレーシングを実装できたので紹介します。 iPhone6などの携帯端末でも動作するくらい軽量です。次のリンクから動作の様子をご覧になってください！ Reflect カラフルな球体に周囲の球体や床を鏡面反射させました。 マウス移動によって、上からの視点にもできます。 無数の球体がずら〜っと並ぶ様子は、ちょっと壮観ですね！？ 一般的にレイトレーシングを行うためには、膨大な計算が必要です。 ソフトウェアで実装した場合、数個の球体を配置しただけでもリアルタイムに処理するのは困難です。 2010年の記事によると、For
WebGLのカレンダー | Advent Calendar 2015 - Qiita
About reserved postingIf you register a secret article by the day before the same day, it will be automatically published around 7:00 on the same day. About posting periodOnly articles submitted after November 1 of the year can be registered. (Secret articles can be registered anytime articles are posted.)
WebGLで暴力的な並列ソートに挑戦する
日照時間足りてますか？やまだです。 KLab Advent Calender 11日目の記事です。 最近WebGLで実装できるちょっと強そうなソートアルゴリズムを知ったので書いてみました。 WebGLよくわかんないやーって人も雰囲気だけでも伝われば幸いです。 強さの秘訣 WebGLは3Dを描くAPIとして著名ですが、2Dはもちろん、工夫次第で汎用計算（GPGPU）にも応用できます。 WebGLでの演算は通常のJavaScript演算とは違い、GPUを使った並列な浮動小数点演算を可能とします。 そして、ソートアルゴリズムの中には計算量こそ地味なものの、並列処理が可能なものがあります。 そのうちの一つがバイトニックソートです。 GPUを使い、物量で計算する暴力的な並列ソートをやっていきましょう。 バイトニックソートとは 前述のとおり、並列処理が可能なソートアルゴリズムです。 配列を小さい領域に
raymarching for games - primitive: blog
demoscene の世界では近年 raymarching というレンダリング手法がよく用いられています。ポリゴンモデルは使わず、モデルデータは数式の図形としてシェーダコードの中で表現し、pixel shader で図形との距離を求めて可視化していく、というものです。 demoscene (4k/64k intro) の厳しい容量制限の中綺麗な絵を出すために生み出された手法ですが、従来のポリゴンベースの手法では難しい独特の絵を出すことができるという副次的効果があります。 raymarching の代表的な作品群 この手法は PS4 世代以降、小規模ゲーム開発チーム向けの有用なツールになるんじゃないかと考えていて、atomic では試しに背景にこの手法を用いています。以下はその過程や考察です。 まず、raymarching の基本については demoscene.jp の人たちが素晴らしい解説
C88 3日目(2015/8/16)東A39a | TechBooster
ご挨拶 TechboosterはコミックマーケットC88に参加します。 サークル配置は「8/16 – 3日目 東地区A-39a」です。 今回の新刊は4冊、記念誌1冊を予定しています。 新刊の内訳はAndroid関係が3冊、Webが1冊です。 壁配置ということで、目印に「緑の旗」を用意しています。 会場では緑のポスターを目印にぜひお越しください。 Android Masters!は、 Android Mの新機能のほかにデザインサポートライブラリを特集、 おすすめの使い方が一読でわかるすぐれものです。 Android改善プログラミング ～開発速度を加速する実装と検証～は、 テスティングフレームワークのEspresso、Robolectric 3.0だけでなく、 Master ofシリーズ最新作RecyclerViewを収録！ 開発環境改善にふさわしい内容です。 Android Building
HTML5関連技術のWebGL(three.js)とFlash(Away3D)のパフォーマンス比較 | ClockMaker Blog
HTML5関連技術であるWebGL (three.js ライブラリを使用)でどれだけのオブジェクトを表示できるのか気になったので、Flash(Away3Dライブラリを使用)とパフォーマンスを比較してみました。WebGL対応ブラウザであるGoogle ChromeやFirefox等でご覧ください。 HTML Demo (Primitive Version) HTML Demo (Primitive Version Ex) HTML Demo (Optimum Version) Flash Demo (Primitive Version) Flash Demo (Optimum Version) 訂正 ※[2013/01/16 23:50追記] 匿名さんやthree.jsの開発者であるMr.doobさんからコメントで、ジオメトリの作成部分で最適化が足りない旨の指摘を頂きました。ジオメトリを無駄
スマートフォンブラウザのWebGL対応状況調査(2013年7月版）
皆様、ごきげんよう。 GClueの下っ端社員の☆です。 スマートフォンでWebGLをやる前に皆さんは、WebGLをご存知ですか？ WebGLは、ブラウザ上でウェブブラウザで3Dコンピュータグラフィックスを表示させるための標準仕様のこと。OpenGL2.0もしくはOpenGL ES 2.0をサポートするプラットフォーム上で、特別なブラウザのプラグインなしで、ハードウェアでアクセラレートされた3Dグラフィックスを表示可能にする。技術的には、JavaScriptとネイティブのOpenGL ES 2.0のバインディングである。WebGLは非営利団体のKhronos Groupで管理されている。 WebGLはHTMLのcanvas要素を使っている。 (Wikipediaより） つまりは、ブラウザでOpenGL ES 2.0できるよ！ってことですね。 それによって、ブラウザ上で3Dがグリグリ動くような
3 Dreams of Black by Google Data Arts Team - Experiments with Google
This experiment is no longer active, but you can still learn about it on this page. “3 Dreams of Black” takes you on a journey through three dream worlds constructed through a combination of rich 2D drawings and animations interwoven with interactive 3D sequences. Throughout various points in these dream worlds, you can grab your mouse and guide the protagonist’s point of view through the experien
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.kevs3d.co.uk/dev/shaders/
レイトレーシング - 格子柄の地面と鏡面の球体のデモはいつから始まったのか。 - S.F. Page
Making WebGL Dance
George & Jonathan - The Best Music
three.js - JavaScript 3D library
