Animating a million letters using Three.js | Articles | web.dev
Introduction My goal in this article is to draw a million animated letters on the screen at a smooth frame rate. This task should be quite possible with modern GPUs. Each letter consists of two textured triangles, so we're only talking about two million triangles per frame. If you're coming from a traditional JavaScript animation background, this all sounds like madness. Two million triangles upda
海外でも話題の metrogram3D 開発秘話！ 実装した本人が語ってくれた WebGL 実装の裏話 - WebGL 総本山
東京の地下鉄を WebGL で 3D ビジュアライズ！ 光のパーティクルを用いた美しい表現が海外でも話題の、和製 WebGL 実装、metrogram3D をご存知でしょうか。 今回、この美しい WebGL によるコンテンツを実装されたご本人から記事の寄稿をいただくことができましたので、ご紹介させていただきます。 three.js でパーティクルを実装するなら非常に参考になる内容だと思いますので、ぜひチェックしてみてください！ WebGLを始めたのが2014年の12月。研究開発の担当分野でWebGLの名前があがり、それを進める事になりました。WebGLと一言でいっても非常に範囲が広く、当時の分け方としては大きく次の二つに分けていました。three.jsをやるか、shaderを書くか?まずは社内にも説明がしやすいthree.jsをやって、それで一定の成果をだしてshaderをちゃんと書こう！
The Algorithmic Sea
This site is made possible by member support. 💞 Big thanks to Arcustech for hosting the site and offering amazing tech support. When you buy through links on kottke.org, I may earn an affiliate commission. Thanks for supporting the site! kottke.org. home of fine hypertext products since 1998. 🍔 💀 📸 😭 🕳️ 🤠 🎬 🥔 For years, one of the holy grails of computer generated visual effects wa
WebGLのドローコール最適化手法―CreateJS勉強会/池田発表資料(後編) ― ICS LAB
本記事は2015年2月10日（火）に開催されたCreateJS勉強会 (第5回) の発表資料「CreateJSクリエイトジェイエスで制作するスペシャルコンテンツ」の後編となります。前編(CanvasとWebGLの比較)に続けて本記事ではWebGLウェブジーエルの最適化手法を紹介します。 WebGLのドローコールの最適化について 前編ではHTML5 CanvasとWebGLの使い分けについて紹介しましたが、ここからはWebGLの最適化手法の1つを紹介します。よく知られているテクニックですが、WebGLでは描画命令のドローコールを少なくすることが有効だと言われています。ドローコールが少なくなることで滑らかなモーション = 60fps(遅延なきRequestAnimationFrameの達成）を実現し、スマートフォンでの実行時の消費電力を抑えられます。 下図は複数の要素を画面に表示するときのWe
生WebGL入門:初音ミクの美麗3Dモデルを表示する(前編)
Special Thanks to @hagat and @teehah for reviewing my articles! 近年、WebGLに流行の兆しが出てきました。WebGLとは、ブラウザに何らプラグインをインストールすることなく、JavaScriptよりGPUを使用した3Dの表示を可能とする技術です。プラグインのインストールが必要ないとはいえ今までは対応ブラウザが少なくあまり実用的ではありませんでしたが、先日のiOS8で正式に対応されたことでモバイルブラウザにおいて対応率が跳ね上がり、スマートフォンにおいてブラウザベースで3Dのゲーム等を作れる可能性が急激に高まりました。 今回WebGL Advent Calendarの一環として、生WebGLで3Dのオブジェクトを表示するところまで挑戦してみます。WebGLにはthree.jsを始めとして有用なライブラリがたくさんあり、大抵の場
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
HTML5の3D表現を身につけよう！簡単なJSではじめるWebGL版Away3D入門 - ICS MEDIA
Away3D TypeScriptはHTMLの3D技術「WebGL」を扱いやすくしたフレームワークです。個人ブログ（HTML5で3Dを実現する本格派WebGLフレームワーク、Away3D TypeScriptの公式デモ)で紹介したようにAway3Dを使えばGPUによる本格的な3D表現をプラグイン無しで作成できます。 そこで、初級者にもやさしいAway3D TypeScript(以下、Away3D)チュートリアルをはじめてみることにしました。必要となるスキルレベルは、JavaScriptの入門書を一冊読み終えたぐらいを想定してます。Away3DはJavaScriptやTypeScriptのどちらでも利用できますが、本連載ではJavaScriptで解説します。 この記事について AwayJSは活発に開発されていないため、本サイトとしては利用は推奨しません。WebGLを活用したい方は、Three
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PlayCanvas - The Web Graphics Creation Platform