はてなブックマーク

IFSはIterated function systemの略で、一言で言うと「ループによって自身の拡縮したり回転したコピーを複製するフラクタル生成システム」ということができると思います。 Wikipediaから引用すると以下のように説明されています。 反復関数系（はんぷくかんすうけい、英: Iterated function system、IFS）はフラクタルの一種であり、一般に2次元のフラクタルの描画や計算に用いられる。IFSフラクタルは自身のいくつかのコピーの和集合から成り、各コピーは関数によって変形されている（そのため「関数系」と呼ばれる）。典型例としてはシェルピンスキーのギャスケットがある。その関数は一般に収縮写像であり、点の集合がより近くなり、形がより小さくなる。従ってIFSフラクタルは、自身の縮小コピーを（場合によっては重ね合わせて）まとめたものであり、各部を詳細に見れば、その

概要 2013年の記事と、だいぶ古いものですが比較的シンプルだけどかっこいい表現だったので、以下の記事で紹介されているコードをコードリーディングしてみたいと思います。 （@i_saintさんに許可をいただいて掲載しています。ちなみに@i_saintさんのTwitterの背景は今回紹介するもののモノクロ版でした） raymarching for games 最終的な絵はこんな感じ↓ コード量からするとそこまで多くないですがかっこいいですよね。 しかも色々と使えそうなテクニックが盛り込まれているので読む価値ありです。 ちなみにこれを参考にして自分の理解の範囲で作ったのが以下の作品です↓ Pile space さて、最初の状態はボックスをXZ平面に繰り返し配置するところから始まります。 #ifdef GL_ES precision mediump float; #endif uniform fl

概要 リリースビルドのiOSアプリのクラッシュログから、クラッシュ理由を探るべく方法を調査したのでそのメモです。 なお、今回の記事を書くにあたって以下の記事を参考にさせていただきました。 iOSのクラッシュログをSymbolicate（復元）して解析する [Xcode]クラッシュレポートの解析手順備忘録 symbolicateを使わずにクラッシュログを(部分的に)解析する 準備するもの 解析するにあたっていくつか準備するものがあります。 クラッシュログ（.crashや.ipsファイル） Xcode dSYMファイル 大まかなフロー 大まかなフローをまず先に示します。 iPhone/iPadなど端末からクラッシュログを取り出す（.crash or .ipsファイル） 対象アプリの.appファイルと.dSYMファイルを取り出す 取り出したログをsymbolicateする（実行ファイルのsymb

概要 以前に、「[コードリーディング] レイマーチングによる波表現を読み解く」というタイトルで波表現をするレイマーチングのコードを読み解きました。 （そのときの動画はこれ↓） 今回はこちらのShadertoyの作品をコードリーディングしたいと思います。 ちなみにこんな感じの絵が出ます↓ （下記は、上の作品にコメントつけたり分かりやすくしたりしたもののキャプチャです） こちらの作品を、自分が分かる範囲でコメントを付けつつ、変数などもできるだけ意味付けしながら解説・読解していこうと思います。 なお、自分がコメントを付けたバージョンはこちらにポストしてあります。 また読解に際して、こちらのブログ記事（Creating a Volumetric Ray Marcher）も参考にさせていただきました。 いちおう翻訳とかも全文やってみたのですが、書いた方が許可してくれたら掲載しようと思います。 許可さ

概要 最近のもっぱらの興味はディープラーニングです。 UnityにもML Agentというプラグインがあったり、最近見るニュースが猫も杓子もディープラーニングによるものだったりと、機械学習、とりわけディープラーニングについては知らないとならないなというのをヒシヒシと感じています。 ということで、ディープラーニング自体の基礎から学習しようと本を手に取って勉強中です。 勉強には以下の本を熟読させてもらっています。 ゼロから作るDeep Learning ―Pythonで学ぶディープラーニングの理論と実装 今回はいきなりディープラーニングについて触れるのではなく、本の中で語られている「計算グラフ」についてまとめようと思います。 なぜこれだけをピックアップしたかというと、微分という計算をグラフ化することでとても簡単に行えるという点がまず面白かったところ。 そして（この本の中では）この「計算グラフ」

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 概要 最近のもっぱらの興味はディープラーニングです。 ディープラーニング自体の基礎から学習しようと、本記事のタイトルの本を手に取って学習を始めたのでそこで得た知識の備忘録です。 （書籍はこちら↓） ゼロから作るDeep Learning ―Pythonで学ぶディープラーニングの理論と実装 なお、本記事はこの本を読んで得た知識を備忘録としてまとめたものになります。 さらに、色々メモを取るには（自分の中で）新しい概念が多く、とても長い内容になってしまうのでまずは「パーセプトロン編」ということで、ニューラルネットワーク・ディープラーニングの元

やりたかったことは、UIのclickイベントが発生した際に、アタッチしたオブジェクトに定義されているメソッド一覧から任意のメソッドを実行する、というのに似せた仕組みです。 。 ↑これ 使用するクラスとメソッド 今回やりたかったことを実現するのに利用したもの。主に Reflection ですね。 System.Type System.Type.GetMethods System.Type.GetMethod MethodInfo ※ ちなみにカスタムエディタ部分はひとつ前の記事（[Unity] カスタムエディタを使ってインスペクタをリッチにする）にまとめたのでそちらを参照してください。 基本的なフローは以下のようになります。 カスタムエディタで特定クラスのインスペクタのGUIをカスタムする 設定されたオブジェクトからアタッチされているコンポーネントを取得（MonoBehaviour を継承し

図解すると以下。 ここで $n$ は平面の法線、 $x$ は「平面上の任意の点」、 $x_0$ は起点となる点、$t$ はいわゆる「媒介変数」。$m$ は起点から平面に向かうベクトル、そして $h$ は符号付き距離となります。 Unityベースのプログラムで言えばそれぞれは以下の意味となります。 $n$ ... 法線。GameObject を利用するなら transform.forward などを利用する。（もちろん、 new Vector3 してもいい） $x$ ... plane.transform.position。交点を求めたい平面上にある「任意の点」。 transform.position も当然平面に含まれるため、これをそのまま利用する。 $h$ ... 上記ふたつのベクトルの内積。具体的には法線の射影した位置ベクトルの長さ。 $x_0$ ... transform.posit

当然、CPUプログラム側からGPUプログラム（シェーダ）にデータを渡すことができますが、UnityのGameObjectにアタッチされたスクリプトからもシェーダに値を設定することが出来ます。 シェーダに値を送るにはMaterialクラスを利用します。 private Material material; // Use this for initialization void Start () { // 初期化時にマテリアルを保持しておく（ダイレクトにアクセスしてももちろんOK） this.material = gameObject.renderer.material; } // Update is called once per frame void Update () { // 経過時間に応じて値が変わるよう適当な値を入れる float r = Mathf.Sin(Time.time);

壁に平行なベクトルを求める ゲームなどでは壁に体当りすると少し壁を登るように移動する場合がありますが、そうした状況で使えるベクトルです。 この「壁に平行なベクトル」を求めるのに必要なベクトルは、「進行ベクトル」と「衝突点に対する法線ベクトル」のふたつです。 法線ベクトルを追加 計算を分かりやすくするためにベクトルを移動してみます。 進行ベクトルを$F$、法線ベクトルを$N$、壁に平行なベクトルを$P$とすると、$P$は、$F$と、法線$N$に$a$を掛けた長さのベクトルを足したもの、ということが分かります。 （余談）ベクトルの足し算 ベクトルの足し算は、一方の終点に他方の始点をあわせ、最初のベクトルの始点から、次のベクトルの終点へベクトルを伸ばしたものが結果として得られるベクトルです。 aを求める ベクトル$F$、$N$は既知のものです。 この中で未知の値は$a$のみです。 $a$の値は内

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

この記事は「GLSL Advent Calendar 2016」の 17日目 の記事になります。 前日までdoxasさんの独壇場でとても高度な内容だったのに、その後にこの記事をアップするのはとても気が引けましたが勇気を出してアップしますｗ 概要 そろそろレイトレーシングに挑戦する時期かなということで、レイトレの一種である「レイマーチング」について再入門してみたいと思います。（前に少しだけやって放置してた） ※ ちょっと長くなりそうなので、今回の記事はvol.1としました。 レイトレとは レイトレ（レイトレーシング）とは、Wikipediaを引用させてもらうと以下のような意味になります。 レイトレーシング（ray tracing）は、波の線（伝播経路）を追跡することで、ある点において観測される画像・音像などをシミュレートする計算手法である。 レイトレーシングを行う対象は「光線」が基本でありこ

概要 Unity以外でもそうですが、メッシュは頂点の塊です。 そしてそれらはTriangleやそれらを結ぶIndexで構成されています。 つまり、勝手に順番を変えてしまうと頂点の情報はぐちゃぐちゃになってしまい、ちゃんとしたオブジェクトとして表示することはできません。 そのため、メッシュを切断して別のオブジェクトに分けようとすると、それなりに頂点郡を計算してポリゴンを縫い合わせてやる必要があります。 今回はそんなメッシュのカットを行うサンプルを公開してくれている人がいたので、そのサンプルを読んだメモを書いていきます。 実際に実行してみたのが以下のものです↓ 左側の3本のラインがカット面を示していて、その平面できれいに切断されているのが分かるかと思います。 しかも、しっかりと切断面に別のマテリアルが割り当てられているのにも注目です。 大まかな流れ まずは大まかな流れから説明します。 具体的に

概要 今モックを作ろうとしていて、それで必要な「ポータル」の表現をやろうと試行錯誤していました。 最初は RenderTexture 使えば楽勝っしょ？　って思いながら作っていたら、VRの場合は視差があるため、それを考慮した実装が必要な点でハマりました。 いくつかの記事とプロジェクトを参考になんとか形になったのでメモしたいと思います。 ちなみに今回メモした内容のプロジェクトはGitHubにアップしてあります。（Unity5.4で動作確認してます） ただ、**まだ違和感が残る実装になっているので、その他の実装方法も含めて現在さらに改良を加えようと思っています。** [2016.09.13 追記] 違和感があったのは単純に自分のミスでした；　両目用にキャプチャを行う際に、オフセットを計算してカメラ位置を補正していたんですが、このオフセットの処理で、せっかく同期した位置情報を上書きしていたのが原

概要 最近では主流になっている「物理ベースレンダリング」の概要をまとめたいと思います。 物理ベース、と呼ばれることから分かるように、レンダリングする際の色の決定を物理ベース、つまり「光のエネルギーを用いて」表現することを言います。 エネルギーを用いて表現することにより、実際にそこにどれくらいの光が集まっているのか、という点からレンダリングするために、実際の映像のように写実的な表現が可能となります。 （とはいえ、いくつもの近似を重ねているのでやっぱりまだどこか映像感があるのも否めませんが） レンダリング方程式 レンダリング方程式は「エネルギー保存の法則」を基礎に、ある程度光学的に正しい光の状態の近似として方程式を解くものです。 物理ベースレンダリングを勉強しているといくつかの方程式が出てきますが、高速に解く方法だったり、より最適な近似を行うものだったり、といった違いがあります。 ただ基本的に

現状、通常のフローでモデルデータを読み込んでそれをそのままジオメトリインスタンシングでレンダリングする方法はないようです。 なので、モデルデータを読み込み、自前で処理する必要があります。 （ただ、ドキュメントも整備されておらず、もしかしたらまだ安定していないかもしれないので、利用する場合は自己責任でお願いします） ちなみに今回の解説用に作ったサンプルはGithubに上げてあります。 （動作デモはこちら） ジオメトリインスタンシングって？ さて、まずジオメトリインスタンシングとはなにか。 WebGLでの詳細についてはエマさんのこちらの記事（WebGLにおけるジオメトリインスタンシング（ANGLE_instanced_arrays）を丁寧に説明してみる）がとても分かりやすく書かれているので読むことをおすすめします。 ざっくり言うと、プログラムで言うところのクラス・インスタンスの関係をジオメトリ

// C# example: using UnityEngine; using UnityEditor; using UnityEditor.Callbacks; public class MyBuildPostprocessor { [PostProcessBuildAttribute(1)] public static void OnPostprocessBuild(BuildTarget target, string pathToBuiltProject) { Debug.Log( pathToBuiltProject ); } } using UnityEngine; using UnityEditor; using UnityEditor.Callbacks; using System.Collections; using System.IO; public class Post

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

この記事はWebVR Advent Calendar14日目の記事です。 さて、今週一週間記事を書き続けようと埋めまくったんですが、まったくノープランでしたｗ なのでうまく着地できるか分かりませんが、WebVR入門と銘打って連載をしたいと思います。 この連載の目的は「WebVRってむずかしいんでしょ？　どうせ」って思っている人に向けて、「えっ、そんな簡単なら私もやってみようかしら？」って思わせるのが目的の入門記事連載です。 Firefoxの安定版ですでにWebVRの実装が取り込まれたのは前回の記事で書いた通りです。 つまりそれだけ期待している、ということでしょう。（だってまだOculus Rift、発売日さえ細かく決まってないのに） 個人的にもWebVRからVRが広まってくれると思っています。 ということで、今回は「WebVR Hello World」として、Three.jsを用いてWeb

こちらの記事を参考に、ゲームループの処理を見てみます。 （やってることは分かるんですが、自分の中にしっかり落とし込めるまで理解できてなかったのでメモとして書いておきます） ゲームループ ゲームは常に画面が動き続け、かつユーザからの操作を待ちます。 また最近のゲームでは物理演算などが当たり前に利用されているので、そうした計算処理を一定の間隔でループさせて処理する必要があります。 そうした諸々の処理のループを一般的に「ゲームループ」と呼びます。 詳細についてはこのあたりの記事が参考になりそうです。 解説 さて、ではさっそく記事を見ていきます。 といってもやっていることは比較的単純で、記事の言葉を引用すると以下になります。 １秒間に可能な限り多くのフレームを描画しようとしながら、１秒毎に決められた回数のロジックを実行するよう試みます。 ということです。 紹介されているコードを少し整形して紹介。

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

WebGL Advent Calendar 1日目の記事です。 前々からどうやるんだろうと気になっていた Bloom。 どういうものかと言うと、窓から光が差し込んだりして光が溢れている様子を表現する方法です。 今回はこれを実装する方法を書きたいと思います。 [2015.12.01 20:45 追記] Bloom処理でブラーの処理が不適切だったため、修正しました。 ※ 本記事はゲームエフェクトマニアックスを参考にさせてもらいました。 サンプル UnityのサイトにBloomに関する記事とイメージ画像があったので引用させてもらいます。 ▼ Bloomあり ▼ Bloomなし 車の窓に反射した太陽の光がふわっと広がっているのが分かるかと思います。 シーンの印象自体もだいぶ違いますね。 リアリティが増すのに加えて、例えばStarWarsのライトセーバーみたいに、自分が光を放つものに適用することでよ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Cygames Engineers' BlogのゲームAI -基礎編- 『知識表現と影響マップ』を読んで色々と勉強になったので、使えるようにするべく実際に自分でもサンプルを作ってみようと思います。 今回は上記記事の中で「経路探索」に使われる「ダイクストラ法」をやってみました。 ちなみにこのアルゴリズムはカーナビの経路探索にも使われているらしいです。 今回の記事とサンプルの実装には、こちらの記事を参考にさせてもらいました。 デモ 今回のアルゴリズムの勉強のために簡単なデモを作ってみようと思って作り始めたら、途中から目的が変わってちょっとし

Unity5から、今まではPro版でしか使えなかった機能が使えるようになっています。 そしてこの「Image Effect」もそのひとつ。 今回はフェードアウトをやってみます。 といってもImage Effectが使えれば全然むずかしくなく、単純に時間に応じて黒色を画面に載せるだけ、という簡単なお仕事です。 ちなみにそれを適用するとこんな感じ↓ 今個人で開発中のVRゲームのシーンｗ カメラにスクリプトをアタッチする まず、Image Effectを適用するために、カメラに対してスクリプトをアタッチします。 アタッチするのはこんな感じのシンプルなスクリプトです。 using UnityEngine; using System.Collections; public class Fader : MonoBehaviour { [SerializeField] Material m_Materi

Rigidbodyでの物理計算、便利ですよね。 ただ、自分で計算して位置を出しているわけではないのでそれが実際にどう動くのか、数秒後の世界を見ようとしてもすぐには確認できません。 そこで、今回はこちらの記事（Unity: n秒後のRigidbodyの移動先の位置を取得するスクリプト書いた）を参考にさせてもらい、どういう計算がなされているのかを解説しつつメモしておきたいと思います。 実際の動作の動画キャプチャ [2015.08.04] この動作サンプルをGithubにアップしました。 サンプルコード 上記の記事を元にメソッドを以下のように実装しました。 [2015.08.04 追記] コメントで指摘をもらいました。（startPosition使ってなかった・・） Vector3 CalcPositionFromForce(float time, float mass, Vector3 sta

いわゆる Raycast ですね。 線分が三角形、つまりポリゴンと交差しているかを判定することで、例えば3D空間上のオブジェクトをマウスで選択したり、あるいはオブジェクトが接触しているか、などなど様々な判定をすることができます。 今回はこの「三角形と線分との交差判定」について調べてみたのでそのメモです。 理論 今回参考にしたのは「Tomas Mollerのアルゴリズム」です。比較的高速で一般的な手法のようです。 概要についてはこちらの記事を参考にしました。 なにを求める？ 各式や、計算方法などは見ていればなんとなく分かりますが、これがなにを求めているのかが最初は分かりませんでした。 行っていることは最終的にはごく簡単な1次関数のグラフに落としこむものでした。 具体的には以下の画像を見てください。 考え方 レイをある方向に飛ばします。 仮にこのレイが三角形面と交わると仮定します。 すると上記