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)
glfx.js - An image effects library for JavaScript
Adjust photos in your browser in realtime with glfx.js, an image effects library powered by WebGL. It uses your graphics card for image effects that would be impossible to apply in real-time with JavaScript alone. There are two caveats to glfx.js. First, WebGL is a new technology that is only available in the latest browsers and it will be quite a while before the majority of users have it. Second
映像から顔を見つけ出す！ JavaScriptでお手軽フェイストラッキングに挑戦 - ICS MEDIA
今、スマホアプリ「SNOW」で、顔写真に動物のパーツをデコったり複数人の顔を入れ替えて、おもしろい写真へ編集することが若い女性の間で流行っています。 このアプリには、画像から顔を検出できるフェイストラッキングという技術が使われています。この技術を使うと、画像から顔のパーツの位置や大きさを特定できるようになり、静止画やアニメーションを重ねるといった演出を加えられます。 フェイストラッキングの技術は昔からありましたが、高度な画像解析の知識が必要なため導入するにはハードルの高いものでした。今回は、JavaScriptライブラリを使って、HTML5でフェイストラッキングを実現する方法を紹介します。 Webテクノロジーでフェイストラッキングに挑戦しよう Webテクノロジーで簡単にフェイストラキングを実現するには、JSライブラリ「clmtrackr」がオススメです。このライブラリでは、負荷が高いフェイ
[GLSL] WebGLで炎の揺らぎ - Qiita
このサイトの炎の揺らぎを解読してみようと思います。 実際に見てもらうと分かりますが、立体的でだいぶリアルな感じの炎が表現されています。 ちなみに解説用にThree.jsで実装しなおしたやつをjsdo.itに上げてあります。 そして結論から言うと、メインとなる処理のところはなんとなくの推測しかできませんでした( ;´Д`) おそらく、視点位置から炎の輪郭となる頂点郡を計算し、3DのCubeTexture的なことをやっているんだと予想。 （なのでメインの処理のメソッド名がsliceなんだと思う） [2015.06.17 追記] ここで紹介している実装、サンプルは「ボリュームレンダリング」と呼ばれるものです。 （今回の炎は「Volumetric Flame」） これは炎などのようにポリゴンで表現しづらい現象を実現するものです。 仕組みとしてはボリューム（今回の例ではキューブ）をスライスして、各断
![[GLSL] WebGLで炎の揺らぎ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/56801aa6c2f0535aa223ca8563f0dd6db07781a0/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-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCR0xTTCU1RCUyMFdlYkdMJUUzJTgxJUE3JUU3JTgyJThFJUUzJTgxJUFFJUU2JThGJUJBJUUzJTgyJTg5JUUzJTgxJThFJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz03ZTkwY2Y1MGIwYzY1ZTQzNmJmNGYyMGNhNjg1YmQ2NA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBlZG9fbTE4JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1lMmQ5MGMxNzhmNTEyNmZmYmVlZTEzOTliMzVmNzRhZA%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D2afa899e9e13b15222b65a34b7d4614c)
BabylonJS - 3D engine based on WebGL/Web Audio and JavaScript
Welcome to Babylon.js 7.0 Our mission is to build one of the most powerful, beautiful, simple, and open web rendering engines in the world, and we are excited to announce the next step forward in that journey: the release of Babylon.js 7.0. This new version brings a smorgasbord of performance improvements, rendering enhancements, and exciting new features that you will NOT want to miss.
Tokyo WebGL Meetup #2
ハードウェア特性に基づいた WebGL 高速化手法 WebGL fast method that is based on hardware characteristics WebGL 高速化のためのテクニック、ハードウェアの特性を良く知った上で速く動く WebGL コンテンツを作るためのノウハウをお伝えします。 An introduction to how do we make WebGL contents with better performance, accoding to the hardware spec and compatibility. 北海道生まれ。株式会社エクサ コンサルティング推進部所属。 三次元コンピュータグラフィックス関連、ユーザエクスペリエンスデザインを専門とする。 Web を含む情報家電からスマートフォン、巨大立体視シアターまで、多岐にわたったCG、ユーザーイ
WebGLを極めるならJSライブラリを使わず書こう！モバイルでも動くHTML5の3次元スライドショーを作ってみた - ICS MEDIA
WebGLを極めるならJSライブラリを使わず書こう！モバイルでも動くHTML5の3次元スライドショーを作ってみた 2014年9月にリリースされたiOS 8においてWebGLが動作するようになったことで、スマートフォン環境での3D表現に可能性を感じ、興味を持った方も多いと思います。そこで今回、写真を読み込んで3D空間上に配置し、パーティクルに分解して次の画像に切り替わるスライドーショーのデモをJSライブラリ（Three.jsなど）を使わずにイチからHTML5とWebGLで作ってみました。WebGLが動作する端末ならモバイルでもなめらかに動作するので、是非試してみてください。マウスやタッチの操作でビューを回転させることができます。 デモを再生する（別ウインドウが開きます） ソースコード (JavaScript) 制作環境について 今回のデモを作成するにあたり、WebGLのAPIを直接呼び出す形
スマホでもWebGLが快適に動く! HTML5で体験する3D表現の可能性 – ICS MEDIA
WebGLウェブ・ジーエルとはブラウザで3D表示するための標準仕様。いまやスマートフォンを含むすべてのブラウザでWebGLが動作します。WebGLを使えばGPUによって描画が高速化されるため高度なグラフィカル表現が可能になります。 WebGLを使えば主に次のようなコンテンツ開発に役立ちます。 3Dモデルの表示 ゲームコンテンツ データビジュアライゼーション プログラミングアート 魅力的で華やかな画面演出（広告系サイトなど） かつてはFlash PlayerやUnity Web Playerのようなブラウザ・プラグインを使わなければ3D表現はできませんでしたが、WebGLの登場によってプラグイン未搭載のスマートフォンのブラウザでも3D表現が実現可能になりました。 本記事ではWebGL入門者にむけ、数秒で試せるオリジナルのWebGLのHTMLデモを多数掲載。どれもスマートフォンのブラウザでも利
WebGL 開発支援サイト wgld.org
次なる Web を見据えて 来たるべき WebGL2 の時代へ 2011 年、最初のバージョンである 1.0 が勧告された WebGL は、ウェブブラウザ上で OpenGL ES に相当するグラフィックス API の機能を利用することができる JavaScript の API です。 そして 2016 年、WebGL の正当な後継バージョンとなる WebGL2 (もしくは WebGL 2.0) がいよいよ本格的に利用できる段階になりつつあります。 当サイトでは、2012 年の開設以来、WebGL 1.0 系の API を用いるための技術解説を掲載してきました。そして今後は、時代の変遷に合わせて WebGL 2.0 系の解説記事も公開していく方針です。 WebGL 2.0 が登場するとは言っても、後方互換を保つという意味もあって 意図的に有効化 しない限りは WebGL 1.0 相当の AP
アドビの新プロジェクト：JavaScript で WebGL シェーダを記述できる ShaderDSL.js - akihiro kamijo
アドビの新しいオープンソースプロジェクトが公開されました。WebGL のシェーダを JavaScript で記述できるよう開発されたフレームワーク ShaderDSL.js です。 WebGL の場合は、シェーダーの記述に使用される言語は GLSL が一般的です。そのため、一般的な Web 開発者にとっては、WebGL を使うには、機能だけでなく、新しい言語を学ぶという手間も発生します。 また、複数のの言語を使って Web ページを記述するのは、メンテ等も大変そうです。そこで、JavaScript で WebGL のシェーダーが記述できたたらよいね！と思ったアドビが新しいフレームワークの開発に着手したというお話です。 （なぜアドビがこんなフレームワークを開発しているのか妄想してみると楽しいかもです） ShaderDSL.js は、内部的に Gladder と RiverTrail を利用し
8 Crazy Animations With WebGL and HTML5 Canvas | favbulous
Posted March 13, 2012 by Kevin & filed under Tech, Web Development. 101,645 views HTML5, WebGL and Javascript have changed the way animation used to be. Past few years, we can only achieve extraordinary web animation by using Flash and Java Applet. It’s possible to create insane effects and crazy animations with scripting and render it on the browser. There are a few reasons that make this achieva
Three.js : WebGL限定の Cube テクスチャによる『パノラマ背景』
VBScript(49) コマンドプロンプト(17) Iray DAZ3D DAZStudio イラスト(12) イラストAC ダウンロードリスト(14) DAZ3D(48) DAZ3D プロダクト(8) DAZStudio(19) イラストAC(22) DAZ3D DAZStudio イラスト 2016(16) 壁紙:イラストAC(8) 背景:イラストAC(14) 人物:イラストAC(4) ﾌｧﾝﾀｼﾞｰ:イラストAC(3) その他:イラストAC(8) ブックマークレット(4) 生活 : お金(14) 生活 : トラブル・知恵(6) 生活(6) Android(32) API(7) C#(22) C++(27) CSS(8) DAZ3D DAZStudio イラスト 2015(17) DAZ3D DAZStudio イラスト 2014(11) DAZ3D DAZStudio イラスト 2
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
幻想的とも言えるほどの見事なストレンジアトラクタを描画する驚きの WebGL デモ！ - WebGL 総本山
WebGL / WebVR
for FrontEnd Engineer
gles.js - a lightweight WebGL renderer for Android
reveal.js - The HTML Presentation Framework
http://clay.io/
WebGL 3D Engines and Tools
http://hellorun.helloenjoy.com/
helloracer.com is a custom short domain
