僕はまだTextureを知らない 2025_03_01

僕はまだ Texture を知らない 第4回UnrealEngine九州LT会 in バーチャル長崎 2025/03/01 #ue九州

Index はじめに 1

ポジTA（ポジタ、ポジティーエー） 40代のテクニカルアーティスト 4年目 Web ：https://sizu.me/posita33 X : @posita33 Zenn : https://zenn.dev/posita33?tab=books 2

• https://sizu.me/posita33
• https://x.com/posita33
• https://zenn.dev/posita33?tab=books

九州とのつながり お土産で買った 黒豚みそ が好評でした 3

• https://housefoods.jp/products/catalog/cat_1,nood,ramen,uma.html

UnrealEngine の本をZenn （電子）で書いてます 有料だけど無料で読めます 調査結果を無料で読めます 書き方と理由については Docswellにまとめました コピーしてペッする ポジTA式 UEドキュメント術 4

• https://www.docswell.com/s/posita33/ZM1LEN-2023-06-17-143125

Unreal Engine の紙の同人技術書を書きました Zenn電子版 Booth：本＋PDF LTで発表しました 5

• https://posita33.booth.pm/items/5836550
• https://zenn.dev/posita33/books/ue5_handbook_supplement
• https://www.docswell.com/s/posita33/ZJL3DX-unreal_engine_indiebook

Shader 本のTexture ページで更新します 10分間で納まらない＋書ききれなかった https://zenn.dev/posita33/books/ue5_shader_book_001/viewer/chap_0g_00_00_index 6

• https://zenn.dev/posita33/books/ue5_shader_book_001/viewer/chap_0g_00_00_index

目次 1. Texture(画像ファイル )の基礎知識 2. Textureを深掘りする a. 画像ファイルを深掘りする b. Unreal EngineのTextureを深掘りする i. Unreal EngineのTextureについて ii. Unreal Engineのいろんな Texture iii. Textureのトラブルシューティング 7

1 Texture( 画像ファイル )の基礎知識

Texture （画像ファイル）は何処で使われている？ 9

表示に関連するところに Texture が使われている 10

サイズ（幅 (px) x 高さ(px) の2次元情報） 最小単位:1ピクセル(Pixel) 11

1ピクセルの中にはチャンネル（色＋ Alpha( 透明)） が含まれる 12

いろいろな拡張子がある ゲーム 画像編集 ソフト .jpg .png .tga .psd .hdr Unreal Engine .uasset .pak 映像 (映像編集ソフト ) .avi .exr .png 13

Import して、Material やUIのWidget で使用する Material 使用 UIのWidget UEにImport 画像ファイル -> .uasset 14

2のべき乗の Texture にはMipmap が作成される ２ 8192 4096 2048 1024 512 256 128 n 128 64 32 16 8 4 2 15

1つの3Dオブジェクトに複数の Texture が使われる Color 色 AO めりはり Roughness ざらざら Normal 凹凸 質感 1画像に3つ情報 Metallic 金属 16

プロジェクトにも画像ファイルを設定できる アイコン サムネイル スプラッシュ 17

いろんなところで使われているはずなのに 僕はまだTextureを知らない 18

2 Texture を深掘りする

画像ファイルと UEのTexture を深掘りしてみる ゲーム 画像編集 ソフト .jpg .png 画像ファイル .tga .psd Unreal Engine .uasset Texture .pak 映像 (映像編集ソフト ) .avi .exr .png 20

2.a 画像ファイルを深掘りする

Pixel とVector 解像度によって差が出る 解像度が変わっても 劣化しない（SVG） 22

Pixel は曲線をグラデーションで表現する 64x64 512x512 23

グレースケールとカラー (RGB/CMYK) グレースケール RGB CMYK （印刷） 24

アルファチャンネルのありなし（不透明・透明） 不透明 透明 25

1pixel のデータの持ち方 1pixel 1 channel R G Glay GA Glay A 8bit 0 0 0 0 0 0 0 0 後ろの数値はチャンネルのbit数 256色（2⁸ = 256） RGB R G B 16bit RGBA R G B channel A 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 65,536色（2¹⁶ = 65,536） ※1channel 32bitや1pixelで16bit(2byte)の場合もある 0

Straight Alpha とPremultiplied Alpha Premultiplied Alpha Straight Alpha 黒フリンジ 27

リサンプル（解像度の拡大・縮小） 64 x 64 1024 x 1024 縮小 バイリニア ７KB ニアレストネイバー 4KB バイキュービック ８KB 拡大 Pixelは解像度を拡大しても品質は上がらない 28

非圧縮と圧縮（可逆圧縮・非可逆圧縮） 拡張子 非圧縮 可逆圧縮 (元に戻せる ) 非可逆圧縮 (戻せない ) R1 R1 R1 x 2 Rx3 R2 R2 G1 G2 G1 G2x2 Gx3 G2 G1 G1 G1x2 Bx2 BMP・TGA TGA(RLE) PNG(DEFLATE) GIF・TIFF JPEG 簡単なイメージ 29

TGA( 非圧縮・可逆圧縮 )をインポート 【非圧縮】 出力したファイルサイズに差はある UEに Import 【可逆圧縮（ RLE圧縮）】 .uassetのサイズは同じ Resource Sizeや画質に差はない 30

PNGとTGAとのアルファチャンネル 【UEにインポートした時の Alphaチャンネル】 【PNG】 RGB情報があるところのみ Alphaが作られる 【TGA】 Alphaチャンネルの情報が Alphaとして作られる 31

2.b Unreal Engine のTexture を深掘りする

UEで使用する Texture に焦点をあてる 画像編集 ソフト 外部ファイル を取り込む （設定について） .jpg .png 画像ファイル .tga .psd ゲーム Unreal Engine UE外に出力 （ふれない） .uasset 映像 (映像編集ソフト ) Texture 内部で作られる Texture Texture トラブル 33

2.b.i Unreal Engine のTexture について

Unreal Engine では色はいろんな情報に使われる ・RGBA（色） ・3DObject（Character、背景） ・UI ・Effect Unreal Engine 【色情報】 Gray RGB RGBA 【色以外の情報】 ・Glay（マスク、質感(Roughness,Metallic)） ・ベクトル（Normal：法線） ・XYZ（位置、角度・アニメーション） ・Z（高さ、深度） ・グラデーション（カーブ） ・環境のライトや色（HDR） ・3次元（Fog,VDB） ・LUT（色調補正） 35

使い道に応じた設定項目が用意されている 使い道に応じた設定項目が用意されている。 インポートした際に自動的に設定されるから大 きな問題は発生しない。 使い道が分かるといろいろなメリット ・品質を劣化させない ・Resource Sizeの削減 ・使用しない機能をオフ 36

画像ファイルをインポートすると .uasset に変換される 【非圧縮】 非圧縮・可逆圧縮で 出力したファイルサイズに差はある UEに Import 【可逆圧縮（ RLE圧縮）】 .uassetのサイズは同じ Resource Sizeや画質に差はない 37

.uasset の中身 バイナリー情報 ・アセットの UEバージョン ・URアセットとしての Path ・インポートした画像の Path ・テクスチャの設定 ・サムネイル画像 ・Textureの色情報 https://blueprintue.com/tools-uasset-reader/ 38

• https://blueprintue.com/tools-uasset-reader/

UEではCompression Settings で 圧縮方法と Resource Size が変わる 外部画像ファイル （非圧縮・可逆圧縮） .uasset （同じ状態） Compression Settings (非圧縮・圧縮 ) 39

カラー（ RGBA ） Default Alpha True Alpha False DXT5(BC3) 1365KB DXT1(BC1) 683KB 4チャンネル 3チャンネル 40

カラー（ RGBA ） 圧縮(DTX5/BC3) と非圧縮 (RGBA8) Alpha True 非圧縮 DXT5(BC3) 1365KB B8G8R8A8 5461KB 4チャンネル 4チャンネル 41

拡大すると劣化している 圧縮 (DTX5/BC3) 非圧縮 (RGBA8) 42

BC7（圧縮しても劣化を抑えられる） 圧縮 (DTX5/BC3) 非圧縮 (RGBA8) 圧縮 (BC7) 43

カラー（ RGBA ） 圧縮(DTX5/BC3) と圧縮(BC7(RGBA)) 圧縮 非圧縮 DXT5(BC3) 1365KB BC7(RGBA) 1365KB 4チャンネル 4チャンネル 44

カラー（ RGBA ） 圧縮(DTX1/BC1) と圧縮(BC7(RGBA)) Alpha False Alpah True DXT1(BC1) 683KB BC7(RGBA) 1365KB 3チャンネル 4チャンネル 45

UEの画像圧縮の条件 ・4の倍数のサイズ ・色数（BC7） ※BC7が万能かというと 圧縮するための条件があるため 仕様を確認する ハードウェアによってはサポートされない 4の倍数でない場合は Compression Settingsを変更しても 圧縮されない 46

Normal 圧縮(BC5) 圧縮 非圧縮 Normalmap(BC5) 5461KB B8G8R8A8 21845KB 2チャンネル 4チャンネル 47

Normal 圧縮(BC5) ・Normalmapは正規化されたベクトル ・2チャンネル(RG)でBチャンネルを計算する R(Tangent)とG(Binormal)があればB(Normal)は計算で求められる。 48

Normal のGreen チャンネルは要注意 49

他にも抑えておきたい Texture の設定 ・Mipmapのありなし（2のべき乗以外のTexture） →Mipmapが必要なもの（3D）と必要なくても大丈夫なもの（UI） →（4の倍数でもMipmapを作れる？） ・Streamingにする/しない ・sRGBのON/OFF ・フィルタリングの設定（拡大・縮小のサンプリングについて） ・Texture Groupが正しく設定されているか ・チャンネルをパッキング（複数のチャンネルを1枚のTextureにする） 50

2.b.ii Unreal Engine のいろんな Texture

UE内でTexture がいろいろな使われ方する 画像編集 ソフト 外部ファイル を取り込む （設定について） .jpg .png 画像ファイル .tga .psd ゲーム Unreal Engine .uasset 映像 (映像編集ソフト ) Texture 内部で作られる Texture 52

Unreal Engine では色はいろんな情報に使われる ・RGBA（色） ・3DObject（Character、背景） ・UI ・Effect Unreal Engine 【色情報】 Gray RGB RGBA 【色以外の情報】 ・Glay（マスク、質感(Roughness,Metallic)） ・ベクトル（Normal：法線） ・XYZ（位置、角度・アニメーション） ・Z（高さ、深度） ・グラデーション（カーブ） ・環境のライトや色（HDR） ・3次元（Fog,VDB） ・LUT（色調補正） 53

1つの3Dオブジェクトに複数の Texture が使われる Color 色 AO めりはり Roughness ざらざら Normal 凹凸 質感 1画像に3つ情報 Metallic 金属 54

SceneTexture （PostProcess ） 色んなレンダリング結果をブレ ンドして描画している PostProcessマテリアルで レンダリング結果を 素材として加工できる 55

CurveAtlas （カーブ情報をテクスチャにする） Timelineノードのような アニメーションを マテリアルで作れる カーブ情報（ＲＧＢ）を グラデーションのテクスチャ として扱える 56

RenderTarget （カメラの映像をテクスチャにする） カメラが写していない場所を映像化する Playerの動きをMask化する 57

Heightmap （高さ情報をグレー情報として持つ） Landscapeを 白黒のテクスチャで 作成できる 58

VAT（Vertex Animation Texture ） Vertex(頂点)の 位置を動かすことで アニメーションさせる Textureには頂点の位置情 報アニメーションが入って いる SkeletalMeshにしなくても アニメーションさせられる https://www.youtube.com/watch?v=6Cain-u9_g4 59

• https://www.youtube.com/watch?v=6Cain-u9_g4

Texture Graph （Texture を作れる） UE内でSubstanceDesignerのようにノードベースでTextureを作れる 60

他にもある Texture （画像ファイル） ・HDRI ・FogやEffectで使われる3DのTexture ・Vertual Texture ・Lighting Buildで作成されるShadow Map ・色調補正の情報を持てるLUT（Look Up Table） ・アイコン 61

2.b.iii Texture のトラブルシューティング

Texture は見えないトラブルがたくさん ・使っていないテクスチャが使われている →MaterialのDefaultテクスチャ ・1pixelがおかしい（フリンジが発生している） →外部ファイル側の問題？マテリアル？テクスチャ設定？ ・アセットの保存場所によってはPackage時に含まれない →Engine内のTextureをデフォルトに使う ・設定をまとめて直したい →インポートの自動化 →EUWで一括変更 ・実機と見た目が違う 63

まだまだ 僕はTextureを知らない 64

勉強や開発を一緒に楽しんでいきましょう！ 65