WebGLでなんか綺麗なキラキラなパーティクルの演出を作ってみた · けんごのお屋敷
元々 OpenGL を使っていたことがあって 3D の基礎についてはある程度わかっていたので WebGL には本当にすんなり入ることができた。WebGL は OpenGL ES の仕様を元にしているので当然といえば当然なのですが、他の OpenGL のプラットフォームと比べて WebGL はテキストエディタとブラウザさえあれば開発環境が整うという手軽さ、さらに WebGL 界隈ではとても有名な three.js というライブラリがあるおかげで、さらに敷居が下がってる。ということで、前々から WebGL で作ってみたかった綺麗でしなやかなパーティクルの演出を作ってみました。 The XSEEDS ※ちなみに XSEEDS というのは、有志で集まったエンジニアがお酒飲みながらワイワイ開発やってる集団です。 作ってみたので、せっかくなので WebGL ってこんなことができるよ、こうやって作れるん
THREE.jsをサンプルのまま作るとCPU使用率が半端じゃない件 - tsuge development page
最初に、ここで使っているのはTHREE.jsのRev.49なのでそのつもりで。 バージョン違いの場合はまた別の解があるかもです。 THREE.jsをサンプルのまま作ると、デュアルCPUであろうと最大限にCPUを使ってくれて常時100％近い。 ちなみにグラフィックボードをちゃんと搭載しているPCなら別として、ビジネス向けノートPCなどソフトウェアでがんばってる場合ね。 Webサイト表示してCPU100％なんて、正直いやだよねと。 CPU時間なんて最近そんな気になるもんでもないけど、ノートは熱くなるし、バッテリの消費も早いし、どっちにしろ使用率は少ないに越したことないだろと。 サンプルでよく見るのはこういう処理。 function animate() { requestAnimationFrame(animate); render(); } function render() { render
安藤日記 [&] WebGL Performance Tuning
安藤日記 安藤日記：デジタルガジェット好き「安藤幸央」の日々のメモ ( yukio.andoh@gmail.com ) [ http://twitter.com/yukio_andoh ] Design Sprint Newsletter https://designsprint.substack.com/ ( via. Behind the magic of AKQA Winterlands ) #WebGL Performance Tuning WebGLコンテンツ／プログラムの速度をコツコツと速くするための、 パフォーマンスチューニング観点をまとめました。 まずはプロファイリングが重要。 闇雲にチューニングしても、あまり速くならない場合もあります。 また、最初の設計や、ハードウェア性能を知った上でのデータ量の見積もりも重要です。 ■WebGLプロファイリングのコツ ●グラフィックスパ
WebGL対応のライブラリThree.jsを爆速にする方法 | ClockMaker Blog
前回のWebGL(Three.js)とStage3D(Away3D)の比較ですが、Mr.doobさんを始め国内外の多くの方からご指摘頂きWebGL(Three.js)版を最適化したところ、最終的にはFlash(Away3D)版と同じぐらいのパフォーマンスになりました。当初、最適化・検証不足で間違った情報を掲載してしまい申し訳ありませんでした。 さて、そのWebGL(Three.js)版を最適化した手法が有意義だったのでシェアしたいと思います。 デモの紹介 まずはこちらの2つのデモの再生を比較してみてください。WebGL対応のブラウザ(例：Google Chrome)でご覧ください。 ▼最適化前 ▼最適化後 どうでしょう？ 圧倒的に後者のほうが滑らかに再生できているのではないかと思います。 後者のほうは配置している3Dのオブジェクト数が10倍近く多いにもかかわらずです。 ※ちなみにFlash
Three.jsで雪を降らせる
WebGL Advent Calender 16日目の記事です。 何番煎じかわからないですが、この季節ですのでThree.jsの入門用として雪っぽいのを降らせようと思います。 Three.jsで雪を降らせる デモ 基本的に通常のThree.jsでオブジェクトを表示させる時と同じで簡単です。 PointCloudMaterialに色とサイズとテクスチャを渡してマテリアルとしています。（いつのまにか名前が変わってました。） ちなみにテクスチャは見えにくいですがこんな感じです↓ これでPointCloudを生成してパーティクルを追加しています。（いつのまにかこれも名前がParticleSystemから変更されていました。） また、FogExp2でフォグを設定して、遠くのパーティクルを指定した色に近ずけて、霞んで見えるようにしています。 あとはこのPointCloudのy軸中心回転とパーティクルの
Three.jsでJSON形式でモデルを読み込んでBoneアニメーションさせるときの注意点 - Qiita
ちょっと（だいぶ？）ハマったのでメモ。 いやー、Three.jsはupdateが激しいのと、そもそも日本語記事が少ないのでだいぶ苦戦した。（というか、まだ全然しっかり把握できてないけど） とりあえず モデルを読み込んでアニメーションさせる 、というWebGLでなにかやるときに避けて通れない処理でハマったのでメモ。 まず結論から言うと、**Boneアニメーションをさせる際は、Boneの数が問題になる**ぽい。 boneの数はどうやら関係ないぽい。改めて書きだしてみたら正常にアニメーションしました。 ちなみにモデルデータはBlenderでThree.jsのJSON形式にExportしたものを使用。 Export設定 モデルを作成してBoneをいくつか適当に追加してから（17くらい？）Exportして読み込ませたところ、モデル自体は正常に読み込まれているものの、アニメーションしない。 試しにBo
日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
『Three.jsとBlenderによるWebGL』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 初めまして。 html5、javascript、flashなどのクライアント開発を メインに担当しております、 菅家(@KA_ka_YY)と申します。 弊社3月に行われました、エンジニア、デザイナーを対象とした アプリコンテストというイベントにて WebGLを使用した野球盤ゲームを作成しました。 その際利用したThree.js（WebGLのjavascriptライブラリ）を用いた WebGLの使用方法を紹介させていただこうと思います。 （1）レンダリングまずは Blender というフリーの3Dモデリングソフトで 以下のようなキャラクターを作りました
WebGL無しiOSでも簡単軽快3D。three.jsとCSS3DRendererでDOMを3D化
Warning: preg_replace(): Compilation failed: invalid range in character class at offset 4 in /home/koj/www/sites/0017_tettori.net/wp-content/plugins/crayon-syntax-highlighter/crayon_langs.class.php on line 340 Warning: preg_replace(): Compilation failed: invalid range in character class at offset 4 in /home/koj/www/sites/0017_tettori.net/wp-content/plugins/crayon-syntax-highlighter/crayon_langs.cl
初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞
初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞ 小山田 晃浩（株式会社 ピクセルグリッド） WebGLはとても高度な技術である一方、APIは低レベルであるためそのまま使うにはどうしても冗長な準備を行う必要があります。一方で、JavaScriptライブラリーを通して高レベルなAPIとしてWebGLを利用する方法があります。こうしたJavaScriptライブラリーとしてはthree.js、Away3D.js、Babylon.jsなどが有名です。その中でも特に人気があるthree.jsを通して、WebGLを利用する方法を解説します。(three.jsのリビジョンは執筆現在の最新であるr65を利用します) three.jsを手に入れる three.jsはhttp://threejs.org/から手に入れることができます。downloadから、zipファイルを手に入れま
多彩な表現力のWebGLを扱いやすくする「Three.js」
多彩な表現力のWebGLを扱いやすくする「Three.js」：Webグラフィックをハックする（5）（1/5 ページ） Three.jsはWebGLの冗長な仕様をうまくラップし、扱いやすいインターフェイスで提供するライブラリだ。サンプルコードと見比べながら、効率良く学習しよう Three.jsの基礎 本連載も5回目を迎え、いよいよ佳境に入ります。今回の題材は、Webブラウザ上で3次元グラフィックを実現する「WebGL」です。ただし、これまでと違ってAPIを直接は触れず、「Three.js」を利用します。Three.jsはWebGLの冗長な仕様をうまくラップし、扱いやすいインターフェイスで提供するライブラリです。Mr.Doob氏を中心にオープンソースで開発が進められており、WebGL界隈ではデファクトスタンダードに近い地位を築いています。 Three.jp公式サイト WebGLはこれまで解説し
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Adreno 300 series GPU black texture flickering · Issue #9988 · mrdoob/three.js
SSSSLIDE
Why is Three.js video not rendering on my Nexus 7