WebGLでレイトレしてゲームを作ってみた - SEGA TECH Blog
すべての色をつなげよう WHOLE MATCH PUZZLE 操作方法 マウスのドラッグ（タッチパネルの場合はスライド）で玉を一列横か縦にスライドさせることが出来ます。 ルール 同じ色同士ですべての玉をつなげると一面クリアです。そのとき100点が加算されます。 ひとつの解答例。赤は赤同士、青は青同士、上下左右どこかでつながっていればよい。 クリアするたびに色が増えていき最大で５色まで難易度が上がります。 パズルの完成度（パーセント）がスコアの下２桁になります。 2分の制限時間内で可能な限り玉を消して高得点を狙ってください。 目指せ1000点！ ※最新のfirefoxとchromeで動作を確認しています。 また、一部のスマホでも動作を確認しています。 結果をツイート タイトルに戻る はじめに ドーモ、セガゲームスは開発技術部所属の栃木と申します。 業務ではライブラリの制作や絵周りのことでコー
WebGL 2.0 で 3D レンダリングを高速化
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
Unity で作成した WebGL アプリを無料で Web 上に公開する方法 - 強火で進め
GitHub には GitHub Pages というサイトを公開する機能が有ります。 GitHub Pages - Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live. https://pages.github.com/ 今回はこの機能を使って Unity で作成した WebGL アプリを公開する手順を紹介します。 以前は Dropbox の Public フォルダなどで簡単に公開可能でしたが無料で使っているユーザ(※)は 2016年10月3日からはこの機能が使えなくなったので、これからは GitHub Pages を使うのが良いでしょう。 ※有料ユーザはもう少し使えますが、それでも2017年9月
WebGLでYCgCo色空間による画像圧縮を実装してみた
このエントリーは、KLab Advent Calendar 2016 の12/19の記事です。 やまだです。 昨年はWebGLをつかったソートを実装してみましたが今年はWebGLを使った画像圧縮を実装してみます。 はじめに WebGLのみならずアプリ開発において画像のフォーマットの選択は重要です。 とくにゲームの大部分を占める画像データはゲームのダウンロード時間に直結するため可能な限り圧縮しておきたいものです。 WebGLではGPUにテクスチャをアップロードする際にはgl.texImage2Dを使用します。 gl.texImage2DはTexImageSourceをアップロードできます。 このTexImageSourceというのが面白くてテクスチャデータとしてHTMLImageElementが使えます。 すなわちGIF/JPEG/PNGといったフォーマットだけでなくGoogleが開発した高
iOS/MetalのシェーダをWebGL/GLSLから移植する - その後のその後
Metalでグラフィック処理を行うにしろ並列演算を行うにしろ、GPUに処理をさせるためのシェーダを書かないといけないわけですが、これがまだ情報が少なくて、「こういうシェーダを書きたいんだけど、誰かもう書いてないかな・・・」というときに参考になる近いものとかはそうそう都合よく出てこないわけです。 ただ、WebGL/GLSLの情報はググると山ほどあって、GLSL Sandbox という、Web上で編集できてプレビューできてシェアできるサイトもあり、何がどうなってそうなるのか理解できない難しそうなものから、ただの円といったシンプルなものまで、既に偉大な先人たちのサンプルがたくさんアップされています Metalのシェーダというのは正しくは Metal Shading Language といいまして、C++をベースとする独自言語なのですが、まー概ねGLSLと一緒です。 実際にやってみたところ、GLS
WebGLで暴力的な並列ソートに挑戦する
日照時間足りてますか？やまだです。 KLab Advent Calender 11日目の記事です。 最近WebGLで実装できるちょっと強そうなソートアルゴリズムを知ったので書いてみました。 WebGLよくわかんないやーって人も雰囲気だけでも伝われば幸いです。 強さの秘訣 WebGLは3Dを描くAPIとして著名ですが、2Dはもちろん、工夫次第で汎用計算（GPGPU）にも応用できます。 WebGLでの演算は通常のJavaScript演算とは違い、GPUを使った並列な浮動小数点演算を可能とします。 そして、ソートアルゴリズムの中には計算量こそ地味なものの、並列処理が可能なものがあります。 そのうちの一つがバイトニックソートです。 GPUを使い、物量で計算する暴力的な並列ソートをやっていきましょう。 バイトニックソートとは 前述のとおり、並列処理が可能なソートアルゴリズムです。 配列を小さい領域に
昔のCRTっぽい画面をWebGLで作る - ABAの日誌
マイコンをつないだテレビみたいな画面を作りたいと思ってLocatePrintっていうコードを書いた。 こんな画面が作れる、し遊べる。locate, print, colorなどの命令でテキストを書けます。というかテキストしか書けない。 こういうブラウン管っぽい画面を作るにはWebGLをポストプロセスとして使うのが便利。 WebGL Fake CRT Effect for HTML5 Games この記事に必要なことはほとんど書いてある。glfx.jsっていうWebGLのイメージエフェクトライブラリを使って、ブラウン管の丸みっぽく画面を歪ませ (bulgePinch)、ふちをちょっと暗くすれば (vignette)、昔懐かしのテレビっぽい絵になる。 ただこの記事だとスキャンラインはPNGイメージを重ねることで実現しているけど、これもできればWebGLのシェーダーでやりたい。あとパピコンやAp
安藤日記 [&] WebGL Performance Tuning
安藤日記 安藤日記：デジタルガジェット好き「安藤幸央」の日々のメモ ( yukio.andoh@gmail.com ) [ http://twitter.com/yukio_andoh ] Design Sprint Newsletter https://designsprint.substack.com/ ( via. Behind the magic of AKQA Winterlands ) #WebGL Performance Tuning WebGLコンテンツ／プログラムの速度をコツコツと速くするための、 パフォーマンスチューニング観点をまとめました。 まずはプロファイリングが重要。 闇雲にチューニングしても、あまり速くならない場合もあります。 また、最初の設計や、ハードウェア性能を知った上でのデータ量の見積もりも重要です。 ■WebGLプロファイリングのコツ ●グラフィックスパ
超簡単に3DCGできるJavaScriptライブラリ作った - aike’s blog
ブラウザでWebGLが使えるようになって3DCGプログラミングはずいぶん身近なものになりました。と書いてるそばから違和感を感じるくらい生のWebGLをJavaScriptで書くのは敷居が高かったりします。できなくはないけど前提となる知識がかなり必要な感じ。 three.jsが登場したときは、これで普通に3DCGができるということで一気にひろまりました。とはいえ、それでもまだやることは多く、画面に四角い箱を表示する場合以下のようなプログラムを書くことになります。 ・シーンを作成 ・ライトを作成、位置と向きを設定、シーンに追加 ・カメラを作成、位置と向きを設定、シーンに追加 ・マテリアルを作成、色を指定 ・BoxGeometryを作成、サイズを指定 ・メッシュを作成、位置と向きを設定、シーンに追加 ・レンダラーを作成 ・レンダリングループ処理 これらのひとつでも間違えたりパラメーターが適切でな
WebGLでかっちょいいシンセできたよー - aike’s blog
ちょうど3年前に当時出始めのWeb Audio APIを使ってウェブブラウザで動くシンセを作りました。その後ブラウザのAPIもいろいろと進化したので、それに合わせてバージョンアップをしてみました。 http://aikelab.net/websynthv2/ https://github.com/aike/webaudiosynthv2 ■新バージョンの特徴 ・WebGL(three.js、ThreePiece.js)を使った3Dグラフィック ・Web Audio APIに追加されたオシレーターノードを使用してエイリアスノイズを排除 ・Web Audio APIのオートメーション機能によるシンプルなGLIDEの実装 ・Web MIDI APIでMIDIキーボードから演奏可能 ・アスキーキーボードによる演奏 ・デモ曲のロングバージョン ■実行環境 ・最新版のChromeが推奨環境です ・Sa
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
