人を馬鹿にしたブロック崩し [space] でスタート 左右キーで操作 Game Over Score: 0 Replay | Tweet 作者: @yubais
人を馬鹿にしたブロックくずし
人を馬鹿にしたブロック崩し [space] でスタート 左右キーで操作 Game Over Score: 0 Replay | Tweet 作者: @yubais
HTML5 CanvasとWebGLの使い分け―CreateJS勉強会/池田発表資料 (前編) ― ICS LAB
2015年2月10日（火）、アドビシステムズ株式会社でCreateJS勉強会 (第5回)が開催され30名を超える方々が来場されました。勉強会のフォローアップとして、発表資料「CreateJSで制作するスペシャルコンテンツ」のスライドをブログ記事という形で公開します。本記事では口頭で発表した内容もできる限り記載しました。 なお、前編（CanvasとWebGLの比較）と後編(WebGLの最適化)の二部構成にしています。前編となる本記事ではスペシャルコンテンツ制作にあたり調査したHTML CanvasとWebGLの双方の利点・欠点をまとめています。 HTML CanvasとWebGL 今回のテーマは「HTML CanvasとWebGLの使い分け」です。皆さんもご存知の通り、HTML5のCanvas要素 (JavaScript ではCanvasRenderingContext2Dオブジェクト）は従
超簡単に3DCGできるJavaScriptライブラリ作った - aike’s blog
ブラウザでWebGLが使えるようになって3DCGプログラミングはずいぶん身近なものになりました。と書いてるそばから違和感を感じるくらい生のWebGLをJavaScriptで書くのは敷居が高かったりします。できなくはないけど前提となる知識がかなり必要な感じ。 three.jsが登場したときは、これで普通に3DCGができるということで一気にひろまりました。とはいえ、それでもまだやることは多く、画面に四角い箱を表示する場合以下のようなプログラムを書くことになります。 ・シーンを作成 ・ライトを作成、位置と向きを設定、シーンに追加 ・カメラを作成、位置と向きを設定、シーンに追加 ・マテリアルを作成、色を指定 ・BoxGeometryを作成、サイズを指定 ・メッシュを作成、位置と向きを設定、シーンに追加 ・レンダラーを作成 ・レンダリングループ処理 これらのひとつでも間違えたりパラメーターが適切でな
Mozillaのゲームに対する本気度を担当者が語る。WebGLが拓くゲームプラットフォームとしてのWebブラウザの姿
Mozillaのゲームに対する本気度を担当者が語る。WebGLが拓くゲームプラットフォームとしてのWebブラウザの姿 ライター：米田 聡 2014年9月2日から4日までパシフィコ横浜で開催されていた日本最大のゲーム開発者会議「CEDEC 2014」では，米Mozilla Foundation（以下，Mozilla）からブラウザのゲームプラットフォーム化を推進している担当者が来日して「Games on the modern Web」（モダンWebにおけるゲーム事情）と題するセッションを行った。4GamerではGame Developers Conference 2013（以下，GDC2013）の際にMozillaの試みをレポートしているが，今回のCEDEC 2014のセッションはその後の進捗報告という感じの内容で，ブラウザのゲームプラットフォーム化が現実になっていることをMozillaの担当
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
超弾幕も可能？ WebGL高速化のススメ
今日のテーマ WebGL高速化のススメ 今回はあくまでも WebGL 特有の高速化 TIPS です。 WebGL にあまりなじみのない方もいらっしゃると思うので…… そもそも WebGL って？ というところから簡単に解説します。
デザイナー・ノンプログラマにおすすめしたいThree.jsのカンタン3D体験 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エンジニアののびすけです。最近毎日ハムスターになる夢を見ます。 前回の記事「圧倒的な3D表現にWebの未来を感じるWebGLを使ったサイト・デモ20選」にまとめましたが、WebGLを使ったサイトが最近話題になっていますね。 従来の平面で考えるWebの時代から次の時代への移り変わりを感じる今日この頃です。 今回は実際にWebGLを使った3D表現にチャレンジしてみます。 JavaScriptで記述しますが、初心者向けにまとめたのでノンプログラマやデザイナーの方にもチャレンジしてほしいです！実際にコード書くところは5分（早い人なら1分）でできると思います。 そもそもWebGLとは PC上で3Dを描画するための技術にOpenGLというものがあります。OpenGLは3DグラフィックスAPIとも呼ばれていて、様々なプラットフォームに対応しており、広く普及しています。 このOpenGLをWe
プラグインなしでブラウザ上でUnityで開発したゲームが動作可能に
WebGLやasm.jsの技術を駆使し、専用プラグインなしでもブラウザ上でUnityで開発したゲームを動かすことが可能になると、MozillaとUnityが発表しました。 Mozilla and Unity Bring Unity Game Engine to WebGL | The Mozilla Blog https://blog.mozilla.org/blog/2014/03/18/mozilla-and-unity-deliver-award-winning-game-engine-to-the-web/ UnityはWindows・Mac OS X・ウェブブラウザ・Flash プレイヤー・iPhone・iPad・Android・Wii・Wii U・PS3・Xbox 360など幅広いプラットフォームのゲーム開発に対応したツールで、2005年にOS Xに対応したゲーム開発ツールとし
WebGLの能力を引き出すプログラマブルシェーダー
WebGLの能力を引き出すプログラマブルシェーダー Webページ上で利用できるグラフィック技術を紹介する本連載も、ついに最終回となりました。フィナーレを飾る題材は、WebGLの最も強力な機能である「プログラマブルシェーダー」です。前回（多彩な表現力のWebGLを扱いやすくする「Three.js」）と同様にThree.jsの使用を前提として、プログラマブルシェーダーの基本的な書き方と、Three.jsを各機能に組み込む方法を解説します。 前回はThree.jsの代表的な機能を解説し、いずれもWebGLでなければ実現の難しいものばかりでした。しかし、実はそれでもWebGLの能力のごく一部を使っているにすぎません。独自のプログラマブルシェーダー（カスタムシェーダー）を書くことができれば、描画処理の大部分を柔軟にカスタマイズでき、望み通りの表現を得られます。Three.jsの使い方に慣れたら、ぜひ
初心者でも絶対わかる、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ファイルを手に入れま
HTML5で燃えさかる炎の表現に挑戦！ WebGL対応のJSライブラリAway3Dはパーティクル機能がかなり魅力的 | ClockMaker Blog
HTML5で燃えさかる炎の表現に挑戦！ WebGL対応のJSライブラリAway3Dはパーティクル機能がかなり魅力的 先日の記事で紹介したJavaScriptライブラリ「Away3D TypeScript」(WebGLに対応)ですが、燃え盛る炎の表現を作成してみました。 デモは以下から試せますので、ぜひWebGL対応のブラウザ(Chrome, Firefox, IE11)を使ってご覧下さい。 Demo (WebGL対応のブラウザでご覧ください) Source (TypeScript 0.9.5で作成) 移植元のFlash版のデモ マウスで画面をドラッグ＆ドロップするとアングルを動かすことができます。もしかしたら環境によっては動作が重たいかもしれないので、ブラウザのウインドウサイズを小さくしてみると滑らかに再生できるようになるかもしれません。 ▲右クリックするとFlash Playerではない
HTML5で3Dを実現する本格派WebGLフレームワーク、Away3D TypeScriptの公式デモ | ClockMaker Blog
HTML5で3Dを実現する本格派WebGLフレームワーク、Away3D TypeScriptの公式デモ HTML5で3Dを実現するWebGL対応のフレームワークAway3D TypeScriptが10月に発表されました。WebGLで3Dを実現する類似ライブラリとしてMr.doob氏らが開発しているThree.jsが名前が知られていますが、Away3D TypeScriptは同等以上に高機能であり高いパフォーマンスを有しています。今回は公式サンプル(Githubでソースコードが公開されている)を通して、Away3Dでどのような表現が可能であるのか紹介していきます。 Away3Dとは Away3DはFlash Stage3Dでもっとも使われているフレームワークの一つです。アドビが提供するAdobe Gaming SDK(フレームワークやツールのパッケージ群)にもAway3Dは採用されています。
最新バージョンのChrome 31とOpera 18、asm.jsとWebGLで高速実行を実現。Unreal Engine 3対応に
最新バージョンのChrome 31とOpera 18、asm.jsとWebGLで高速実行を実現。Unreal Engine 3対応に Mozillaが開発したasm.jsは、JavaScriptを事前最適化コンパイラで徹底的に最適化するとともに、実行時チェックやガベージコレクションなどの実行速度の足を引っ張る処理を止めてしまうなどの手法で、JavaScriptを高速で実行できるようにする仕組みです。 asm.js:コンパイラのための低レベルかつ高度に最適化可能なJavaScriptのサブセット MozillaはFirefoxでasm.jsに対応していますが、GoogleもJavaScriptエンジンの最適化の一環としてasm.jsも高速に実行できるようにすると、5月に行われたイベント「Google I/O」で表明していました。 MozillaのGame Platform Strategis
［GDC 2013］Webブラウザで「Unreal Engine 3」がヌルヌル動く!? ゲームエンジンを5日でHTML5へ移植した驚きの技術とは
［GDC 2013］Webブラウザで「Unreal Engine 3」がヌルヌル動く!? ゲームエンジンを5日でHTML5へ移植した驚きの技術とは ライター：米田 聡 Game Developers Conference 2013（以下，GDC 2013）の2日めとなる米国時間3月26日，Webブラウザ「Firefox」の開発で知られる米Mozilla Foundation（以下，Mozilla）が，「Fast and Awesome HTML5 Games」（高速かつ驚愕のHTML5ゲーム）と題するセッションを開催した。 HTML5はそのポテンシャルが高く評価されてはいるが，実際にそれで作成されたゲームを見ると，「Webブラウザ上のゲームならこんなものか……」と落胆させられるものが多い。そのため正直に言えば，筆者はあまり期待せずに参加したのだが，蓋を開けてみれば，たしかにタイトルどおり「
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
二次元イラストがぬるぬる動く！ Live2DでWebGLアドベンチャーゲームを作ろう
Angry Birds Walkthrough Videos, Golden Eggs, and more | AngryBirdsNest
three.js - JavaScript 3D library
IBM Developer
http://www.jthree.jp/
ELLIE GOULDING
