今回はゲーム画面のコントラストを調節するポストエフェクトの作り方を紹介します。Photoshopなどでは、スライダを動かすだけでコントラストを調整できますね。この機能をUnityのシェーダで作ってみましょう。 今回の記事の内容は次のとおりです。 コントラストの原理 描画する画像をフックする コントラストを高くするシェーダを作る カメラにコントラスト用のシェーダをセットする まとめ コントラストの原理 まずは、コントラストを高くするというのは、どういう操作なのかを最初に説明します。コントラストを高くする、というのは「暗いところをより暗く、明るいところをより明るくする」ことです。 Photoshopのトーンカーブで説明すると、次の図のようになります。例えば輝度値200の明るいピクセルは、このカーブを通すと輝度値は230になります。逆に輝度値50の暗い部分はこのカーブを通すと輝度値は20になりま

4009とは、株式会社フォークにおけるよろずごとメディアです。 「人」「未来」「技術」「仕事」「∞」のシーンから、日々の取り組みを裏表なく発信します。 4009とは、株式会社フォークにおけるよろずごとメディアです。 「人」「未来」「技術」「仕事」「∞」のシーンから、日々の取り組みを裏表なく発信します。 4009とは、株式会社フォークにおけるよろずごとメディアです。「人」「未来」「技術」「仕事」「∞」のシーンから、日々の取り組みを裏表なく発信します。

📌 はじめに 今，この記事を皆さんはPCディスプレイで見たり，スマートフォンやタブレット，またはテレビなどで見ていると思います．その画面で黒地のものを表示してよく見てみると周囲の景色が映り込んでいないでしょうか．反射防止フィルターやノングレア液晶を使っている場合はかなりボケた映像になっているかもしれません．液晶に限った話ではなく，例えば大理石の床やガラス，金属や光沢紙，濡れた表面などを見てみると同じように景色が写り込んでいるのがわかると思います．これは今見ている物体の周辺に光源から放出された光子がぶつかって反射され，さらにその反射された光子が見ている物体に反射されて私達の目に届いて写り込んで見えています．コンピュータグラフィックスではこのような映り込みはレイトレーシング法で表現することが出来ます．ただし，周辺の物体を含めた反射の計算量はとても大きく，時間のかかる処理になっています．これを

はじめに こんにちは、近頃Web系に浮気していた@yoship1639です。 皆様は楽しい3Dプログラミングライフを如何お過ごしでしょうか。 私はWebを最近触り始めたのがきっかけで、Docker+Three.jsでPBRやレイトレをぼちぼち行っています。 ところで皆様こんな悩みをお持ちではないでしょうか 「DirectX9時代の3Dはなんとなくわかるけど、最近のは複雑怪奇すぎて全然知らない」 「ああレイトレね、完全に理解してるわー（よくわかっていない）」 そんなあなたに最近の3DCGで何が流行っていてそれが何を解決しているのかを、なるべく分かりやすく掻い摘んでご紹介したいと思います(中には10年程前の手法もありますが現役の手法なので紹介します)。これから紹介する技術や用語を駆使することで、近年の美麗な3DCGを再現することができるようになります。 理解しやすくするため、詳細な技術要素やア

概要 今回はこちらのブログ（Ray Marching Fog With Blue Noise - The blog at the bottom of the sea）で紹介されているShadertoyの作品（Blue Noise Fog ）のコードリーディングをしてみたいと思います。 実際に動いているシーンはこんな感じ。いわゆる『ゴッドレイ』を実現しています。 タイトルはBlue Noise Fogと、ノイズについての話がメイントピックなのですが、個人的にはこの『ゴッドレイ』の実装に興味があって読み解きました。 さっそくコードリーディングしていきましょう。 レイマーチングのコードを読む場合は一番下から上に向かって読んでいくと理解がしやすいです。 C言語的な部分もあって関数の宣言前に呼び出すことができないからです。 なので処理は下から上に向かって書かれていることが多いです。 フラグメントシェ

WebGLでシャドウマッピングや被写界深度フィルターを実装する場合に、深度値をテクスチャに書き出したものが必要になるようです。 WebGL2からはフレームバッファに使う深度バッファをカラーバッファと同じようにテクスチャを使用できるようになり、これによりカラーバッファと深度バッファを同時に取得できるようになったようなので試してみました。 （正確にはWebGL1でも拡張機能WEBGL_depth_textureを有効にすることで深度バッファにテクスチャを利用できるようですが、以下で説明する方法と同じようにできるかはわかりません。） サンプルでは以下のように左が手前、右が後ろになるように２つの三角形を描画しています。 このシーンの深度値を表示すると以下のようになります。 深度値の範囲は[0, 1]で手前が0(黒)、奥が1(白)になります サンプルコード全体はこちらから、実際に動作しているものはこ

この記事は WebGL Advent Calendar 2016 の６日目の記事です。 ※glTFフォーマットの現在の最新バージョンは「glTF2.0」です。本記事はglTF1.0について書かれた記事ですのでご注意を。1.0と2.0は互換性がなく、少なからず相違点があります。glTF1.0のアセットは現在ほとんど流通していないため、本記事は参考程度にしてください。 glTF2.0に対応した記事はこちらになります。まだ未完成ですが随時加筆していきます。 はじめに　〜 glTFとは 〜 glTF (The GL Transmission Format)とは、OpenGL系のAPI (WebGL, OpenGL ES, OpenGL) と親和性の高い、ランタイム用途向けのアセットフォーマットです。 特にWebGLにとっては、特定ライブラリに依存しない、本格的な汎用３Dフォーマットの決定版とも言え

初めに 関数群 配列(など)をJSONで厳密に比較 行列として扱えるか確認する m*nの零行列 m*n の単位行列 対角行列 行列の和 行列の差 行列のスカラー倍 行列の転置 行列の乗算 対角成分の抽出 下三角行列 上三角行列 行列の対角和（トレース） 行列の内積 まとめ 初めに 本稿は配列を配列のまま行列計算できるようにしたいという謎の考えの下で超絶適当な実装をしようとした筆者を供養するためのものです。ライブラリ使えよっていう 最新のコードはページ最下部のまとめに置いてます。 JavaScript を学び始めて1週間も経ってないのでエラーの出し方とかが気になる方もいるとは思いますが、そこは適宜変更を加えてください。 少し考えればLU分解とかも書けるのでしょうが疲れてしまったので気が向いたときに追記します。(たぶんそっちの方が重要なんだろうけど...)何か問題点を見つけた人はお手数ですがコ

どうも、DevOps チームの うすい です。 トトロも鬼滅の刃 無限列車編も見たことがありません。 今回新しいシステムを aws-sam-cli を用いて構築したので簡単にですがそれらの内容を記述したいと思います。AWS SAM 自体の説明は割愛します。 私のマシンの aws cli などのバージョンは下記となります。 $ aws --version aws-cli/1.16.79 Python/3.7.1 Darwin/19.6.0 botocore/1.12.69 $ sam --version SAM CLI, version 1.6.2 余談ですが aws-sam-cli のバージョンアップの速度はすごいですね。 AWS SAM では CloudFormation っぽいテンプレートファイルと samconfig.toml ファイルを使用します。samconfig.toml はs

公開からだいぶ時間が経ってしまいましたが、Life Universe の技術解説を書きます。 English version is here. Life Universe について その前に、いくつか知っておくとよい事柄があるので先に説明します。 OTCA Metapixel について ライフゲームの説明については割愛します。ライフゲームはチューリング完全なので様々なパターンが存在し、その中に OTCA Metapixel というものが存在します。OTCA Metapixel は（メタ）セルのオンとオフの状態が視覚的に分かる特殊なパターンで、ライフゲームのみならず outer totalistic なルール[1]で動く全ての[2]２次元セルオートマトンを再現できます。 つまり、ライフゲームの中で動くライフゲームを見ることができます。 こちらは有名な動画ですが、実際にこういう計算が可能になり

フロントエンドのテストをしよう Webのフロントエンドの自動化を進めようか。という話をしていて、 「そもそもテストってなんだ？」 「フロントエンドに特有のテストってなんだ？」 「〇〇ってツール流行ってるらしいってどうよ？」 みたいなことを話をしていました。そうしたときに、やっぱり知識足らねぇなぁ。と思ったので、2,3日でゴリゴリと内容をまとめてみる作業をしてみました。 あんまりこういう書き方はしないんですが、私自身散発的な思考で、フロントエンドのテストを調べることをしたので、そのような語り口で書いてみようと思います。 以下の内容は、あくまで例なので、別にこういう仕事があったわけではないです。 とりあえず投げられた要求・仕様 とりあえずなんか仕事が振ってきた。パラパラと要求を聞いてみると、こんな感じだった。 承認のダイアログが欲しい メッセージのフォントはOswald メッセージは変更できる

Shader記述時の注意点* for文のループ回数を動的に出来ない。 * if文はあまり使わない方がいいらしい (処理負荷が高い) * 基本bit演算は使えない。将来のために予約はされている。拡張を使えば使える。 * 配列も基本的には使わない方がいい ifの分岐を避ける> 3項演算子vec3 BLACK = vec3(0.0); vec3 WHITE = vec3(1.0); vec3 color; // こんなif文は、 if (x < 0.5) { color = WHITE; } else { color = BLACK; } // こんな三項演算子に置き換える color = (x < 0.5) ? WHITE : BLACK;こんな感じでif/else構文を避けていくわけですが、この方法の欠点はベクトルの要素を使って一度に条件分岐することができない事です。 step関数とmix関

第二話　←前回 つづきです。 Firebaseで一気にオンラインゲームに！ そろそろオンラインゲームっぽくしたくなった(思いつき)ので、オンラインゲームっぽくしておきましょう。なおPureScriptのFirebaseのバインディングは他の人が書いたものがあったんですが、それが古くて動かなかったので、筆者が自分で書きました。つらい。それではFirebaseに接続！　もちろんコードは基本的にJavaScriptとほとんど同じ！　雰囲気を知ってほしいので、JavaScript版のコードとPureScript版のコードを並べて書いてみます！ JavaScriptならこう！ var firebaseApp = firebase.initializeApp({ apiKey: "AIzaSasdfasdfasfiTNu3gGRNgqRsadlR0", authDomain: "zombie-c585

対象の読者 https://webrtc.org/getting-started/firebase-rtc-codelab のガイドを試して挫折した人 Javascriptがちょっとわかる WebRTCとFirebaseの初心者 はじめに FirebaseのFirestoreを使うことでフロントエンドのコードだけでWebRTC通信に必要な情報の交換（シグナリング）をすることができます。 ビデオ会議システムの需要が増え、低遅延でNATを超えてビデオ通話をするためにWebRTCが注目されてしばらく経ちました。 ブラウザでWebRTCビデオ通話を実現するためにSDKを使うのもいいですが、 将来サービスがスケールしたときのことを考えてがんばって自前で作ったほうが得かもしれません。 私は1年前にWebRTCを使った、リモートワークのためのコワーキングスペース「Air Commute」というサービスを

鹿野さんに聞く！2023年モダンCSSの最新トレンド https://findy.connpass.com/event/278449/ で発表した資料です。 各リンクはこちらから参照 https://tonkotsuboy.github.io/20230413_findy_css/

CloudFormationテンプレート間でリソースIDなどを渡す方法について紹介します。 簡単のため、2つのテンプレートで以下を実施する例で示します。 VPCを作りVpcIdを渡す 渡されたVpcId内にSubnetを作る 1. AWS::CloudFormation::Stack を使って !GetAtt *.Outputs.* で受け取る 親となるテンプレート(base.yml)を用意して、2つのテンプレートを呼び出す形になります。 値を渡すテンプレート(vpc.yaml)ではOutputsに値を出力し、 親テンプレートのParametersで!GetAtt ResourceName.Outputs.OutputNameを使って渡します。 受け取るテンプレート(subnet.yaml)はParametersにパラメータを用意しておきます。 なお、vpc.yaml, subnet.ya

tl;dr JavaScriptに参照渡し/値渡しなど存在しない 存在するのは変数に入る値の参照のみ 変数に値を代入すると参照が切り替わる という様に考えれば不毛な議論を避けられるのではないかという妄想 そしてタイトルは明らかな誇張表現 はじめに よくJavaScript界隈で見られる変数に関する話題として、「値渡し/参照渡し」が上がりますが、そもそもJavaScriptにはC++のような参照渡しなど存在しないです。それなのにわざわざ値渡し、参照渡しと分類することで、勝手が違うC++の参照渡しと混同しかねないです。実際にそのような話題が人目に付く程度盛り上がったときには、大抵「それはC++の参照渡しと違う」などと指摘が入り、JavaScriptでの参照渡しと呼ばれていたものが「参照渡しのようなもの」で片付けられるのを何度も見たことがあります。 ここまでの自分はJavaScriptにはJav