多彩な表現力の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はこれまで解説し
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を扱いやすくする「Three.js」
多彩な表現力のWebGLを扱いやすくする「Three.js」：Webグラフィックをハックする（5）（4/5 ページ） 特殊効果 まるでコンソールゲーム機のような、派手な特殊効果もWebGLが得意とするところです。もちろんThree.jsにも、そうした特殊効果をサポートする機能が搭載されています。ここでは、それらの中から代表的なものを4つ解説します。 パーティクルシステム フォグ レンズフレア ポストプロセス これらの特殊効果を取り入れることで、よりインパクトが強く見栄えの良い映像表現ができます。いずれも簡単に使えるので、ぜひ活用してください。 パーティクルシステム パーティクルシステムは、細かいスプライトを大量に表示して各種効果を実現します。WebGLは表示処理のほとんどを高速なGPUで実行するので、他のAPIでは不可能なほど膨大な数のパーティクルがいとも簡単に表示できます。 Three.
Aerotwist - Tutorials
Hello! My name is Paul. I work at Spotify as a Software Engineer. You can usually find me on Twitter. Get in touch I don’t bite. Honestly. You can find me on Twitter and YouTube, and I like hearing from people so say hi. Subscribe You should totally get the RSS feed, or whatever it is you kids are using these days (I miss Reader.) Except as otherwise noted, the content of this page is licensed und
Aerotwist - Getting Started with Three.js
Please note: this has been tested with Three.js r82 I have used Three.js for some of my experiments, and it does a really great job of abstracting away the headaches of getting going with 3D in the browser. With it you can create cameras, objects, lights, materials and more, and you have a choice of renderer, which means you can decide if you want your scene to be drawn using HTML 5's canvas, WebG
Three.js part 1 – make a star-field
Tutorial Time required : 30 minutes Pre-requisites : Basic JavaScript and HTML. Some Canvas experience useful. What is covered : The basics of three.js and using the Particle object. Now updated for three.js revision 48 Remember FastKat? Wanna know how you’d make it yourself? Well it’s quite easy to create a similar effect with three.js and particles. And as particles are the simplest 3D objects y
【２】Cubeで遊ぼう！ Tweenアニメーション編 - はじめてのthree.js
はじめに 前回の記事ではthree.jsのCubeを使って迷路データを3Dで書きだすまでをやりました。 今回はその迷路の中を歩きまわるCube君を投入していきますよー。 ・・・その前に、JSコードがかさばるので前回分のコードは最適化して外部ファイルにしてます。事前に読み込んでください。 Maze.js Stage.js そして下記が、今回の開始時のスクリプトになります。 その他の外部ファイルは前回とほぼ同じですが "RequestAnimationFrame.js" だけ外してあります。 [Demo] Cube_001 (WebGLRenderer or CanvasRenderer) Cube_001 (CanvasRenderer) 配置と移動 壁と同じ要領で、Cubeを作って開始位置に設置します。また、矢印キーで上下左右に移動する実装もここで行っています。 [Demo] Cube_0
日記 | ヨモツネット
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 混在でき
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Buy Instagram Likes - 100% Real & Instant | Just $1.49
three.js webgl - interactive - voxel painter