I've made a JavaScript simulation of driving at night time on the motorway. It's hard to classify what it is. It's not a video, because it's generated dynamically. It's not a game, because you just watch. It's not a screensaver, because it's not the 90s. Maybe it's a "demo"? This is something I've been planning to make for years, but kept forgetting about. I would only remember it when in the pass
CreateJS勉強会 (第6回)でのライトニングトーク「意地でもCreateJSでWebGLを使ってみよう」(発表者:川勝)の発表内容を記事としてまとめました。CreateJSのWebGL機能は高いパフォーマンスが得られるものの、表現の制約があります。本記事ではCreateJSのWebGL機能を拡張することで、その制約を超えて望みの表現を実現する方法を紹介します。 CreateJSではWebGLレンダリングに対応 CreateJSの中で、描画機能を提供しているEaselJSはWebGLでのレンダリングに対応しています。WebGLではレンダリングにGPUを使用できるため、高速に描画が可能です。CreateJSではWebGLを使用すると、従来のContext2D形式に比べて環境によっては最大51倍もの高速化が見込めます(参照「WebGL Support in EaselJS - Create
Mozillaは6月4日、オープンソースのクロスプラットフォームのゲーム構築用JavaScriptライブラリ「PlayCanvas Engine」をリリースした。「世界で最も容易に利用できるWebGLゲームエンジン」としている。 PlayCanvas Engineは3Dグラフィックを利用したゲーム開発向けのJavaScriptエンジン。Webブラウザ上で利用できる3DグラフィックスAPIである「WebGL」を利用する。プロジェクトは、WebGLがデフォルトで有効となった「Firefox 4.0」のリリース(2011年3月)後に立ち上げられており、パートナーとしてMozillaのほか、米ARMやゲーム開発を手がける米Activisionが名を連ねている。 対応OSはWindowsおよびMac OS X、Android、iOSで、グラフィックスのほか物理演算エンジンやアニメーション、2D/3D
初心者でも絶対わかる、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ファイルを手に入れま
皆様、ごきげんよう。 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がグリグリ動くような
Away3D TypeScriptはHTMLの3D技術「WebGL」を扱いやすくしたフレームワークです。個人ブログ(HTML5で3Dを実現する本格派WebGLフレームワーク、Away3D TypeScriptの公式デモ)で紹介したようにAway3Dを使えばGPUによる本格的な3D表現をプラグイン無しで作成できます。 そこで、初級者にもやさしいAway3D TypeScript(以下、Away3D)チュートリアルをはじめてみることにしました。必要となるスキルレベルは、JavaScriptの入門書を一冊読み終えたぐらいを想定してます。Away3DはJavaScriptやTypeScriptのどちらでも利用できますが、本連載ではJavaScriptで解説します。 この記事について AwayJSは活発に開発されていないため、本サイトとしては利用は推奨しません。WebGLを活用したい方は、Three
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
集中線は球を利用して作成します。どう利用するかというと、球を細長くしたものを1本の線と見立てて、その線を放射状に配置して集中線とします。ここで球を使うのは、ペンの入りと抜きを再現するためです。 「three.js」には、球を作るジオメトリ「SphereGeometry」が存在します。このジオメトリで作った球の「scale.x」「scale.z」を小さくして、「scale.y」を大きくすることで、線状に変形させます。描画位置は「Math.cos」「Math.sin」を使って求めます。後は、放射状になるように回転させれば完成です。 ポイントは、集中線はオブジェクトが多いので、グループに登録してまとめて扱えるようにすることです。すると、後で集中線の位置を移動したり、角度を変えたりする際に、グループの属性を変更するだけでよくなります。中の線を1本ずつ変更するのは大変です。グループ化をうまく使い、階
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く