こんにちは。技術部平山です。 今回は以前書いたインデクスカラー画像に関する記事、及び、 16bitカラー画像に関する記事の続編です。 今回はRGBを「輝度」と「色差」に変換してから圧縮する技法を紹介します。特徴は、 GLES2で出せる そこそこ良好な画質 不透明で12bit/画素(実質3/8の圧縮率)、アルファ対応すれば20bit/画素(5/8の圧縮率)。 圧縮は高速でツールを選ばない 変なシェーダなしでバイリニアフィルタ可能 専用コンポーネント/シェーダで面倒くさいのはインデクスカラーと一緒 といったところで、結論は変わらず ETC2で良くない? となります。 なお、すでにUnity用の実装が公開されている ChromaPackと だいたい同じもので、 元テクスチャが2のべき乗(POT:PowerOfTwo)であれば、それを維持できる アルファチャネルへの配慮 といったあたりが少し異なる
せっかくBlenderでマテリアル・テクスチャを設定しても、FBX形式では色・質感・ノーマルマップといった情報はエクスポートされません。 そのせいで、「マテリアルの再設定が手間だ」「Unity上で思った表現ができない」と悩んでいる方、いらっしゃるのではないでしょうか？ こういった悩みを解決してくれる「glTF」というフォーマットが存在します。 今回はこの「glTF」フォーマットを用いて、マテリアル再設定の手間削減・Blenderで設定した表現をUnity上で再現するための手順についてご紹介していきます。 glTFとは？ 「Khronos Group 3D Formats Working Group」によって開発された、使う場所を選ばずに3Dモデルやシーンを表現することができるフォーマットです。 要するに共通フォーマットであり、相互運用可能な3D表現が簡単に実現できます。 Blenderでは
Unityにおけるテクスチャの色空間設定（sRGBチェックボックス）の意味と挙動をまとめました。 はじめに テクスチャと色空間 RenderTextureと色空間 参考 関連 Unity2019.2.18 はじめに Unityではテクスチャ毎に、格納されている値の色空間の設定を行うことができます。 テクスチャ設定のsRGB(Color Texture)がこれにあたります。 ガンマのワークフローで作業する場合にはこの設定値は意識することが無いと思いますが、 リニアワークフローを使う場合にはきちんと挙動を理解する必要があります。 そこでこの記事ではテクスチャと色空間の関係についてまとめます。 なお、本記事の内容はリニアワークフローの基礎知識があることを前提としています。 これに関しては以下の記事にまとめていますので、必要に応じて参照してください。 light11.hatenadiary.com
Unityでは画像のフィルタリングをImport Settings→Filter Modeから変更できます。シェーダで特に何もしない場合は、この設定に従って色の補間が行われます。ただ、前回記事（水中の屈折）でフィルタ処理を行う必要がありました。そこで、フィルタリングを行うシェーダを作成してみました。 ポイントフィルタ ポイントフィルタはピクセルの色を決定する際に、色の合成を行うことなく一番近いテクセルの色をそのまま使用します。そのため、このフィルタではピクセルの中心を一番近いテクセルの中心へずらす処理が必要になります。この処理によって色の合成が行われなくなり、テクセルの色がそのまま出力されます。 まずは、UV座標の横方向\(u\)について考えます。\(u\)はテクスチャの幅を\(w\)とすると $$u=\frac{n}{w} (0\leq n \leq w)\tag{1}$$ と表せます。
最近の投稿 サイトを新しくしました Unityでスクリプトを使わずに流体を計算する PHPでオンライン対戦できるリバーシを作ってみた ハル研究所プログラミングコンテスト2018に参加しました ワイヤーアクションゲームを作りました 最近のコメントリバーシAIを作ってみた に yukari よりPHPでオンライン対戦できるリバーシを作ってみた に 白丸 よりリバーシAIを作ってみた に taguchi よりPHPでオンライン対戦できるリバーシを作ってみた に ああ亜 よりリバーシAIを作ってみた に Yoka よりアーカイブ 2021年6月 2018年12月 2018年11月 2018年10月 2018年9月 2018年6月 2018年5月 2018年2月 2018年1月 2017年12月 2017年11月 2017年8月 2017年3月 2017年2月 2016年12月 2016年8月 20
はじめに はじめまして、ドリコムでエンジニアをやっているイシカワと申します。普段の業務ではモバイルゲームの開発に携わっています。 アドベントカレンダーの参加は今回が2回目。一昨年は3Dプログラミングについてこんな記事を書きました。今年はモバイルグラフィックス分野から個人的に気になったトピックを紹介します。 シーグラフが示す少し先の未来 今年のシーグラフ開催から数ヶ月後、おもむろにプレゼン資料を読み漁っていたところ、「Moving Mobile Graphics」というコースの存在を知りました。コース概要を読むと、どうも3年前に新設されたコースで、主な目的は最先端のモバイルグラフィックスの技術紹介ということ。お題目には、2018年の技術トレンドを反映して「XR」をテーマにした発表が並んでいます。 そんな中、Unity Technologies による「Maximizing Rendering
はじめに 本記事は Unity Advent Calendar 2018 の 11日目 の記事です。 前日の記事は もんりぃ先生さん の「ごっこランドを支える技術 〜ビルド編〜」でした！ qiita.com 本記事では、インテリアマッピングの実装について簡単にまとめてみました。 最近発売されたPS4の「Marvel's Spider-Man」でちょっと話題になっていたので、 気になって調べてみました。本記事はその備忘録のようなものになります。 目次 はじめに 目次 インテリアマッピング（Interior Mapping） 実装 無限平面 無限平面までの距離計算 無限平面を交差 無限平面の表裏 階層 テクスチャを貼る ランダム オブジェクトを置く おまけ（視差マップ） おまけ（視差遮蔽マップ） まとめ 別の手法 参考資料 明日 インテリアマッピング（Interior Mapping） インテ
屋外のシーンを遠くまで作るのは大変です。 普通に作っていたらコスパが悪過ぎるので、 写真を板に貼り付ける「ビルボード」をよく利用します。 現地で撮影した写真を切り抜き Quadに貼り付けてスケールを調整するだけ。コスパ良過ぎます。 しかし、よく見るとやたらボケていませんか？ テクスチャは２Ｋもあるのに、全く繊細さがありません。 これでは、折角の情報量満載の写真素材が台無しなので、何とかします。 Mip Map とは 簡単に言えば、遠くに位置するオブジェクトのテクスチャ解像度を下げて、 レンダリングコストを最適化する・・・的な機能です。 基本的にはいい奴ですが、こいつのせいで折角の高解像度テクスチャがぼけてしまうのです。 Unityではデフォルトで Mip Map が生成されるように設定されています。 かと言ってこのオプションを切ると、 画はシャープになりますが、少しカメラが動いただけでジリ
WebGLを基本から学ぶ授業. この記事はWebGLを基本から教える記事である。 他のサイトに載せてあるような昔のOpenGLが更新された記事ではなく、 時代遅れのアイデアを捨てて、 WebGLとは何か、WebGLがどうやって動くかについて、理解へと導く、完全に新たな記事である。 WebGL2に興味があればこれを参照して下さいwebgl2fundamentals.org 基本 基本 WebGLの仕組み WebGLのシェーダーとGLSL WebGL State Diagram 画像処理 WebGLにおける画像処理 WebGLにおける画像処理。続き 2Dでの移動、回転、拡大縮小、行列計算 二次元での移動 二次元での回転 二次元での拡大縮小 二次元での行列数学 3D 三次元の正投影 三次元透視投影 三次元のカメラ Lighting 三次元指向性光源 三次元点光源 Spot Lighting St
今回はUnity 5.6で追加されたLightingの新しい機能、特にShadowmaskについてです。 Shadow Maskは動的な影と静的な影を混ぜる手法 「影」の計算を事前に行う マスクなので輝度や色を変える事が出来る 間接光は事前にテクスチャに焼かれる 光沢が綺麗に出る Cookieが使える 近距離はダイナミックに、遠距離はShadowMaskを使う 遠距離に低解像度のShadowMaskを使って、色々と節約 ShadowMapの解像度を節約 リアルタイムな影の負荷を節約 or 高品質化 2017と5.6でDistance Shadowの設定位置が異なる Shadow Maskの使い方 関連 Shadow Maskは動的な影と静的な影を混ぜる手法 まずShadowMaskとは何ぞやという話ですが、要するに動的な影と静的な影を混ぜる新しい手法の一つです。 tsubakit1.hat
はじめに keijiro さんの以下のつぶやきを見て Unity 2017.1 から CustomRenderTexture という新しいテクスチャが導入されたことを知りました。 Real time reaction-diffusion system with CustomRenderTexture (Unity 2017.01) https://t.co/NvZhkNTS1s pic.twitter.com/O1nJ09eHPu— Keijiro Takahashi (@_kzr) 2017年5月14日 従来でも Graphics.Blit() などで似たようなことが出来たと思いますが、これを使うと最低限のスクリプト、またはスクリプト無しで簡単にプロシージャルテクスチャを作ることが出来ます。 デモ 波動方程式をシミュレーションするシェーダと、シミュレーション結果をテッセレーションした P
実践編第２弾「水流を作ってみる」。 以前、某案件で地下浸水を作り、 押し寄せる水流をディスプレイスと屈折を組み合わせて表現したので、 それを解説していきたいと思います。 モデルの準備 こんな感じの場所に、こんな感じで水を流してみます。 屈折 まずは、屈折表現から入れていきます。 詳しくは、以前の記事に描いてありますので、そちらを御覧ください。 今回はこんなテクスチャを用意しました。大小２つの押し寄せる波です。 この後ディスプレイスも加える予定なので、タイリングを合わせる為に、 テクスチャスロットの Scale & Offset ではなく、 別のプロパティ（_WaveTiling）を用意してタイリングさせます。 これだけだとまだ良く分かりませんね。 ディスプレイス 次に、同じ形状のハイトマップを用意してディスプレイスさせましょう。 屈折用のテクスチャと同じ要領でハイトマップを展開します。 ハ
Learn RenderMan® Take advantage of great educational resources
今回は焼いた影とリアルタイムな影を混ぜる方法についてです。 焼いた影とリアルタイムな影 Baked Shadowはリアルタイムなオブジェクトに影を落とさない リアルタイムな物にBakedで焼いたマップの影をに落とす パフォーマンス・クォリティを稼ぐために Shadow Distanceを下げる 影を落とすオブジェクトだけShadowOnlyを複製する Shadow Onlyのメッシュはソコソコローポリでも良い その他 関連 焼いた影とリアルタイムな影 UnityではLightコンポーネントのShadowを設定するだけで、影を追加する事が出来ます。この際に表示される影はリアルタイムに計算されている物で、規模や物によっては非常に高いGPUの負荷になります。 このため良くある手法としては「事前計算した結果をテクスチャに焼きこんでしまう」という手法を取ります。これは所謂 Baked と Baked
Unity 5.6(b3)より、Experimental（実験的）で提供されていた新しいライトマップの機能がベータ版に統合されました。 ライトのMixedモードがStationaryモードに変化 ベイクした影を表現しつつリアルタイムな影も使いたい 事前計算した影を「マスク」として準備しリアルタムな影と同じ色を使いたい 近距離はリアルタイムな影、遠距離はShadowMaskを使いたい 影をテクスチャに焼き付けつつ、リアルタイムな影も表現したい テクスチャに焼き付けは間接光だけで十分、影はリアルタイムな物を使いたい 影をテクスチャに焼き付ける その他 ライトや光源処理の一覧表示 ８以上のIntensityが可能に Lightmap Staticの設定がレンダラーに移動 何かベイクに妙に時間がかかる Directional Specularモードの削除 ちなみにExperimental Buil
最近色々忙しくて全然更新できていませんでしたが、 ちょうどいいネタを思いついたのと、アドカレが期限超過で1枠空いてたので代わりに投下します。 実装に丸1日、記事書くのに1日くらいかかりました。 目次 表面下散乱(Subsurface Scattering)とは？ SSSで出来ること 実装に際しての考え方 実装方法:ランバート反射 実装方法:ハーフランバート 実装方法:曲率を考慮したシェーダ 実装方法:テクスチャ空間での拡散(Texture Space Diffusion:TSD) 実装方法:スクリーン空間での拡散(Screen Space Subsurface Scattering:SSSS) 実装方法:Translucent Shadow Maps:TSM 頂点空間表面下散乱(VSSS:Vertex Space Subsurface Scattering) 実装手順 結果 まとめ 参考
この記事は，WebGL Advent Calendar 2016 16日目の記事です。 今年も何もしてないなぁと思いながら生きていたのですが、WebGLで色々成果を挙げている友人に感化されて飛び入り参加しました。よろしくお願いします。 今回は環境マップでよく利用されているキューブマップを使って、WebGL上で擬似的なIBLを、拡張機能を利用する方法としない方法の2つ実装しました。 この記事では実装の中で得た知見を共有できればと思います。 今回作ったもの https://github.com/kaneta1992/cubemapIBL IBL(Image Based Lighting)とは IBLと略すこともある。実在する風景の写真や高精細な画像をライティングの色情報に使用して、シーンをレンダリングする方法。広いレンジの明るさ情報を記録できるHDRIを用いることで、自然な光と陰影を表現できる
必要な拡張機能それで合ってますか? 最近、WebGLで遅延シェーディングしたりすると、モバイルでG-Bufferが描かれないなんてことがあった。 いや、でもOES_texture_floatは確かに正常にgetExtensionできる。 CPUで書き込み、GPUで読み出すというケース あくまで、GPU側ではRenderTargetとして使わず、tetxture2Dで読み出すと言う場合には確かにOES_texture_floatのみで問題ない。 ただし、フィルタにLINEARをかけるのであれば、OES_texture_float_linearが必要だ。 half floatテクスチャを用いたい場合は、OES_texture_half_float,OES_texture_half_float_linearをそれぞれ用いれば良い。 ここまでは常識的な範囲だろう。 GPU側で書き込みが必要なケース
![[WebGL] 浮動小数点テクスチャの扱いでハマった件 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/d9b5dcafc370f0dd76ce0440c36b5c9fe4ea4a2c/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCV2ViR0wlNUQlMjAlRTYlQjUlQUUlRTUlOEIlOTUlRTUlQjAlOEYlRTYlOTUlQjAlRTclODIlQjklRTMlODMlODYlRTMlODIlQUYlRTMlODIlQjklRTMlODMlODElRTMlODMlQTMlRTMlODElQUUlRTYlODklQjElRTMlODElODQlRTMlODElQTclRTMlODMlOEYlRTMlODMlOUUlRTMlODElQTMlRTMlODElOUYlRTQlQkIlQjYmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTBhNzA2OWE1ZjkzNDVjZDI5MmRlY2I3MmQ3ZDE1NjRj%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBreWFzYmFsXzE5OTQmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWYxM2I1ZTUzYWIyMjY3YmI1YjRmODI3ZWZlNWUyODk0%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D9c913691d2215bf51a91854d11daa95d)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
