WebGL2入門 基礎編
WebGLもずいぶんと普及し、そろそろWebGL2の足音も聞こえ始めています。一部のブラウザでは既に実装が進み、限定的ではありますが、実際に利用することも可能になっています。 しかしWebGL2に関する情報は少なく、あったとしてもWebGLとの差異を説明したにとどまるものが多いのが現状です。そこで、この記事ではWebGL2について、基本的な使い方を包括的に説明していきたいと思います。 WebGL2入門 記事一覧 基礎編（この記事） 最適化編 3D知識編 3D描画編 アニメーション編 テクスチャ編 WebGL2とは WebGL2はブラウザ上で3DCGを扱うための標準規格です。OpenGL ES 3.0がベースになっており、全体的な仕様もそれに準拠します。WebGL2を使えば、GPUの恩恵を受けた高速なレンダリングが可能になります。レンダリングはcanvas要素に対して行われます。 WebGL
正真正銘のReactだけの不純物なしでReact入門
Reactのチュートリアル、たくさんありますよね。どれも質が高く、どこから手をつければいいかわからなくなっちゃいます。 ですがやはり巷のチュートリアルには面倒な問題もあります。今回は面倒ごとを全部すっ飛ばしてReactでのウェブアプリ作りに入門してみましょう。 Reactを始めるには、まずあれとこれとそれとどれと…… Reactやるには、まずNode.js入れてbabel入れてreact入れてreact-router入れて、ついでにredux入れてreact-redux入れて、redux-saga入れて…… Reactめんどくせえ！！！ってのが正直なところだと思います。はい、私もそう思います。ただ、まあ、色々必要なのも事実なので……。 それでもやっぱり「ReactやるならReactだけやりたい。他はどうでもいい」という気持ちは簡単に捨てられるものではありません。そこで今回はそういう面倒全部
JavaScriptの「コールバック関数」とは一体なんなのか
近年のフロントエンドの盛り上がりはすごいですね。プログラミング初心者がJavaScript（最近ではTypeScriptも）から学び始めるなんて昔ではなかなか考えられなかったことです。 そんな世界中で大人気のJavaScriptですが、プログラミングに慣れていても困惑する部分が結構あります。特に初心者にとっては、非同期処理、this、コールバック関数、あたりが難しいのではないかと思います。 非同期処理については前に解説しましたし、thisの解説はネットに大量に転がってるので、今回はコールバック関数について解説します。 コールバック関数ってなんなんだ コールバック関数というとsetTimeoutなんかで使われるアレですね。Node.jsでもたくさん使われます。setTimeoutだと以下のような使い方になります： setTimeout(function() { console.log('He
JavaScriptで大量のオブジェクトの当たり判定を効率的にとる - Subterranean Flower Blog
ゲームなどのコンテンツにおいて、「当たり判定」から逃れることはできません。オブジェクトとオブジェクトが衝突したかどうかという判定は、インタラクティブコンテンツにおいて最も重要な部分になるからです。 当たり判定の実装自体は難しくありません。ですが、素朴な実装ですと、対象となるオブジェクトが大量である場合に、十分なパフォーマンスが出ません。これはオブジェクトの多い、現代的なゲームでしたり、弾幕シューティングなどを作るときに大きな障害となります。 この記事では、大量のオブジェクトの当たり判定を処理する、効率的な方法について紹介します。 まずは素朴に実装してみる 当たり判定の処理を語るには、ある程度ゲームの骨組みのようなものが必要になってきます。もちろんクラスなどを使わないベタ書きでもよいのですが、大変読みにくくなってしまいます。ですので、今回は、まず簡易的なゲームエンジンのようなものを作って、そ
JavaScriptで弾幕STGをフルスクラッチで作る その1 ゲームエンジン編
プログラミングといえばゲーム制作ですよね（最近はそうでもない？）。かつてはウェブブラウザ上で動くゲームを作ろうとすると苦労しましたが、最近ではHTML5やES6などの発達によって、作るのもだいぶ楽になりました。ゲーム制作用のJSライブラリなども散見されるようになってきて、JSによるゲーム制作のハードルはどんどん低くなってきています。 ですがやっぱりフルスクラッチ（※自分で全部作ること）で作ってみたいですよね？フルスクラッチ、楽しいですからね。楽しさ100倍です。バグの量も100倍ですが。 というわけでJavaScirptで弾幕シューティングゲームをフルスクラッチで作ってみましょう。対象となるブラウザはChrome51以降です。 ファイルの準備 まずはHTMLファイルとJSファイルを用意しましょう。全てJSから制御するので、HTMLファイルはほぼ空で結構です。 <!DOCTYPE html>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
