WebGLをES6で書いてInstancingしてみた。 リロードするたびに三角形の描画位置が変わります
WebGLをES6に書き直してみた。描画はdrawElements
WebGLのステンシルバッファを使ってワイプエフェクトを掛けています。 以下のことができます。 マウスの位置に合わせて円形ワイプが移動 マウスホイールで円形ワイプのサイズ変更
テクスチャ2枚を使って、ステンシルバッファでマスクしてます。 1枚目にマスク用のテクスチャを描画し、その上に2枚目を重ねる事で目の部分だけくり抜くマスクができました。 マウスでぐりぐりできます
テクスチャをオフスクリーン表示してみました。 imgの上下反転はgl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);でやってます
フレームバッファにステンシルバッファをさせてみました。 マウスでぐりぐりできます ※ 追記 この方法だとステンシルバッファしたものをフレームバッファに表示してるだけなので フレームバッファのステンシルは使ってません。 → フレームバッファでステンシル使う場合はこちら(http://jsdo.it/.naotaro/2EIH)
プリマルチプライド(乗算済みアルファ)画像の場合、透明部分のふちが黒くなる その解決法のテスト。 HTMLのコメント部分を解除すれば正しく動く。 このサンプルはわかりやすくバグったままにしてある(顔のふちが黒くなるのが、乗算を2重にかけてる証拠) 乗算済みでない画像に切り替えると綺麗になる ・参考URL [コンポジターに必要なアルファチャンネルの知識(前編)](http://compojigoku.blog.fc2.com/blog-entry-4.html) [コンポジターに必要なアルファチャンネルの知識(後編)](http://compojigoku.blog.fc2.com/blog-entry-5.html) [乗算済みアルファとは? その1:補間アルファの問題点](https://blogs.msdn.microsoft.com/ito/2010/07/10/423/)
三角関数(sin,cos)の復習も兼ねて、手裏剣を真ん中に飛ばすようにしてみました。 手裏剣も画像を使わず、canvasで描画してます。 避けゲーのサンプル用です /* 2013.09.08 */ ・避けゲーとして成立してないので、修正
スロットゲーム的なものを作ろうと思い、enchant.jsでスロットの基本機能を作ってみました〜!
音声認識の電工掲示板です。 2013/01/14公開のChrome25開発版でしか動きません。 試してみたい方は以下のサイトからBeta or Dev版をDLして下さいね。 http://www.chromium.org/getting-involved/dev-channel 【使い方】 (1)音声入力ボタン押下 (2)マイクアクセスを許可押下 (3)faviconが点滅している時にマイクに話かけると文字が変わります 【ポイント】 ・音声入力後、少し待って下さい。 ・faviconが点滅している間は何回も入力可能です ・faviconが点滅しない場合は、もう1度ボタンを押して見て下さい ・Webサーバ上でしか動かないです 味見部でWeb Speech APIの勉強会をやっていたので影響受けて作ってみました〜!
android1.x〜2.x系の携帯をひたすら殴ります。 HTML5開発者がかかえている不満を少し解消! 【操作方法】 マウスクリックのみ <素材> ・android携帯画像 http://www.matcheck.cz/androidguipsd/ http://www.marlinmobile.com/blog?page_id=285 ・割れた画像(Photoshopプラグイン) http://design-develop.net/design/high-res-photoshop-brushes-for-creating-broken-glass-effect.html ・効果音源 http://koukaongen.com/cgi/se_search/herodb.cgi?table=sound&view=L&recpoint=0
ゲームライブラリを使わずに書いたレトロゲーム サウンド素材:魔王魂の爆発06、銃05
襲ってくるモンスターからプレイヤーを守って下さい 【操作方法】 マウスキードラッグ上下:プレイヤーの移動 スペースキー:弾を発射します [サウンド素材・絵素材] びたちー素材館 http://www.vita-chi.net/sec/voi/hora/voivoi1.htm マッチメイカーズ http://osabisi.sakura.ne.jp/m2/material3.html [絵素材] ドット絵素材 http://park2.wakwak.com/~kuribo/dot/dot1.htm ※ 2013/1/27のGGJに投稿したゲームです! tmlib.jsを使えば1日もかからずにこれぐらいのゲームができます♪ 若干操作性が悪いのでそのうち修正
スプライト画像を画面いっぱいに敷き詰めるテストコード
畳が大好きなので、javascriptで敷き詰めてみました♪
HTML5純正なテストリス的なゲーム
ゲームによくあるランキング機能がほしかったので作りました。 【機能】 ・localStorageから読込・保存 ・点数の大きい順に入れ替え表示 ・セットした値をCSSアニメーションで強調
tmlib.jsを使ってゲームを作る
炎を円運動させてみた! animation.move(x, y, m);でうまくできなかったので とりあえずjS実装
requestAnimationFrameとsetIntervalの検証 参考: requestAnimationFrameでフレームと再描画更新を制御する http://yomotsu.net/blog/2013/01/05/fps.html
CANVASでよく動画読み込みなどで使用されるダウンローダー画像作ってみました