---
title: 作ってわかるレンダリングパイプライン〜CPUで3D描画〜
tags:  #3dプログラミング #ios #iosdc  
author: [ta_ka_tsu](https://www.docswell.com/user/ta_ka_tsu)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/5G75Y45748.jpg?width=480
description: 3D描画の仕組みを理解することでGPUを使用せずに3D描画エンジンをフルスクラッチで作成する方法に関するスライド。 理解に重点を置くことを目的をしているため実用性はない。  発表時の動画は https://youtu.be/Ow-ouwxxfP8
published: March 07, 21
canonical: https://www.docswell.com/s/ta_ka_tsu/NZWWJZ-2021-03-08-013242
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/5G75Y45748.jpg)

作ってわかる レンダリングパイプライン ~CPUで3D描画~ iOSDC Japan 2018

# Page. 2

![Page Image](https://bcdn.docswell.com/page/V9J2GVGJRX.jpg)

自己紹介 @ta̲ka̲tsu 岐阜県在住

# Page. 3

![Page Image](https://bcdn.docswell.com/page/5DEYV3GEM9.jpg)

自己紹介 @ta̲ka̲tsu 岐阜県在住 3D CAD系 プログラマー

# Page. 4

![Page Image](https://bcdn.docswell.com/page/2VJNMV878K.jpg)

自己紹介 @ta̲ka̲tsu 岐阜県在住 3D CAD系 プログラマー 3D CAM系 プログラマー

# Page. 5

![Page Image](https://bcdn.docswell.com/page/GYE9N6XE3P.jpg)

自己紹介 @ta̲ka̲tsu 岐阜県在住 3D CAD系 プログラマー 3D CAM系 プログラマー 会社設立

# Page. 6

![Page Image](https://bcdn.docswell.com/page/5GE8KZ97DR.jpg)

自己紹介 @ta̲ka̲tsu 岐阜県在住 3D CAD系 プログラマー 3D CAM系 プログラマー 会社設立 フリーランス←Now

# Page. 7

![Page Image](https://bcdn.docswell.com/page/MLELZDMJR1.jpg)

自己紹介 @ta̲ka̲tsu 岐阜県在住 3D CAD系 プログラマー 3D CAM系 プログラマー 会社設立 フリーランス←Now

# Page. 8

![Page Image](https://bcdn.docswell.com/page/54JMVP6JW1.jpg)

概要 レンダリングパイプラインの 理解 分解 再構築

# Page. 9

![Page Image](https://bcdn.docswell.com/page/ZPJR21NE9L.jpg)

レンダリング パイプラインの 理解 Understanding

# Page. 10

![Page Image](https://bcdn.docswell.com/page/NPEXDY87XY.jpg)

レンダリングパイプラインとは 3Dグラフィックスを計算する 処理方式の1つ レンダリング： データから画像などを得ること パイプライン： 複数の処理を直列に繋いだ一連の処理

# Page. 11

![Page Image](https://bcdn.docswell.com/page/63EKX3L7DY.jpg)

レンダリングパイプラインで描けるもの ・点

# Page. 12

![Page Image](https://bcdn.docswell.com/page/4L735G6E5P.jpg)

レンダリングパイプラインで描けるもの ・点 ・線

# Page. 13

![Page Image](https://bcdn.docswell.com/page/V87DD1M7GD.jpg)

レンダリングパイプラインで描けるもの ・点 ・線 ・三角形

# Page. 14

![Page Image](https://bcdn.docswell.com/page/4VJPXQQ786.jpg)

プリミティブ ・点 ・線 ・三角形(ポリゴン) プリミティブ

# Page. 15

![Page Image](https://bcdn.docswell.com/page/L2EVL5PJQW.jpg)

プリミティブ ・点…頂点1つ ・線…頂点2つ ・三角形…頂点3つ

# Page. 16

![Page Image](https://bcdn.docswell.com/page/Z57GX6QELR.jpg)

頂点属性 頂点属性 ・位置

# Page. 17

![Page Image](https://bcdn.docswell.com/page/V4EQ84WJP5.jpg)

頂点属性 頂点属性 ・位置 ・色

# Page. 18

![Page Image](https://bcdn.docswell.com/page/DKJ42Q1E1Q.jpg)

頂点属性 頂点属性 ・位置 ・色 ・法線ベクトル ・テクスチャ座標 ・…

# Page. 19

![Page Image](https://bcdn.docswell.com/page/PLE1MP57GD.jpg)

レンダリングパイプラインの入出力 3Dデータ レンダリング パイプライン フレームバッファ

# Page. 20

![Page Image](https://bcdn.docswell.com/page/8GEW32WE26.jpg)

レンダリングパイプラインの入出力 頂点列 レンダリング パイプライン フレームバッファ

# Page. 21

![Page Image](https://bcdn.docswell.com/page/W47ZVD2E3Y.jpg)

レンダリングパイプラインの入出力 頂点列 レンダリング パイプライン フレームバッファ

# Page. 22

![Page Image](https://bcdn.docswell.com/page/KYJ65367VZ.jpg)

レンダリングパイプラインの入出力 頂点列 レンダリング パイプライン フレームバッファ 共通データ (Uniform)

# Page. 23

![Page Image](https://bcdn.docswell.com/page/5GJ5YL5J48.jpg)

レンダリングパイプラインの入出力 描画命令 (Draw Call) 頂点列 レンダリング パイプライン フレームバッファ 共通データ (Uniform)

# Page. 24

![Page Image](https://bcdn.docswell.com/page/4LE35L5J5P.jpg)

レンダリング パイプラインの 分解 Decomposition

# Page. 25

![Page Image](https://bcdn.docswell.com/page/V8EDDNYEGD.jpg)

レンダリングパイプラインの入出力 頂点列 レンダリング パイプライン フレームバッファ 共通データ (Uniform)

# Page. 26

![Page Image](https://bcdn.docswell.com/page/4V7PX52E86.jpg)

レンダリングパイプラインの入出力 頂点列 頂点処理 プリミティブアセンブリ ラスタライズ フラグメント処理 ピクセル操作 フレームバッファ 共通データ (Uniform)

# Page. 27

![Page Image](https://bcdn.docswell.com/page/L2JVLPX7QW.jpg)

頂点列 頂点処理 プリミティブアセンブリ ラスタライズ フラグメント処理 頂点処理 ピクセル操作 フレームバッファ

# Page. 28

![Page Image](https://bcdn.docswell.com/page/Z5EGXPRJLR.jpg)

頂点処理 出力： 頂点列 入力： 頂点列 頂点処理

# Page. 29

![Page Image](https://bcdn.docswell.com/page/V4JQ82Y7P5.jpg)

頂点処理：頂点シェーダー 頂点 共通データ 頂点 ・位置 ・位置 ・属性A ・属性B ・属性C 頂点シェーダー ・属性D ・属性E

# Page. 30

![Page Image](https://bcdn.docswell.com/page/DK742LZJ1Q.jpg)

頂点処理：頂点シェーダー 頂点属性 ・位置 ・色 ・法線ベクトル 頂点シェーダー 頂点属性 ・位置 ・色

# Page. 31

![Page Image](https://bcdn.docswell.com/page/PLJ1MLDEGD.jpg)

頂点処理：クリッピング クリッピング空間 Metalでは −1 ≦ x ≦ 1 −1 ≦ y ≦ 1 0≦z≦1

# Page. 32

![Page Image](https://bcdn.docswell.com/page/8GJW3V8J26.jpg)

頂点処理：クリッピング

# Page. 33

![Page Image](https://bcdn.docswell.com/page/W4EZV49J3Y.jpg)

頂点処理：クリッピング

# Page. 34

![Page Image](https://bcdn.docswell.com/page/KY7653DEVZ.jpg)

頂点処理：クリッピング

# Page. 35

![Page Image](https://bcdn.docswell.com/page/5G75YL8748.jpg)

頂点処理：クリッピング

# Page. 36

![Page Image](https://bcdn.docswell.com/page/V9J2GLVJRX.jpg)

頂点処理：クリッピング

# Page. 37

![Page Image](https://bcdn.docswell.com/page/5DEYVQQEM9.jpg)

頂点処理：クリッピング

# Page. 38

![Page Image](https://bcdn.docswell.com/page/2VJNMK278K.jpg)

頂点処理：クリッピング

# Page. 39

![Page Image](https://bcdn.docswell.com/page/GYE9NVDE3P.jpg)

頂点処理：ビューポート変換 x y ビューポート クリッピング空間 ビュー

# Page. 40

![Page Image](https://bcdn.docswell.com/page/5GE8KP57DR.jpg)

頂点処理：ビューポート変換 x y ビューポート クリッピング空間 ビュー

# Page. 41

![Page Image](https://bcdn.docswell.com/page/MLELZ13JR1.jpg)

頂点列 頂点処理 プリミティブアセンブリ ラスタライズ プリミティブ アセンブリ フラグメント処理 ピクセル操作 フレームバッファ

# Page. 42

![Page Image](https://bcdn.docswell.com/page/54JMVWMJW1.jpg)

プリミティブアセンブリ 入力： 頂点列 出力： プリミティブ列 プリミティブ アセンブリ

# Page. 43

![Page Image](https://bcdn.docswell.com/page/ZPJR2YLE9L.jpg)

プリミティブアセンブリ V[0] V[1] V[3] V[2] V[4]

# Page. 44

![Page Image](https://bcdn.docswell.com/page/NPEXD467XY.jpg)

プリミティブアセンブリ V[0] Point[0] V[1] Point[1] V[3] V[2] Point[2] Point[3] V[4] Point[4] Points

# Page. 45

![Page Image](https://bcdn.docswell.com/page/63EKXZG7DY.jpg)

プリミティブアセンブリ V[0] V[1] Line[0] V[3] V[2] Line[1] V[4] Lines

# Page. 46

![Page Image](https://bcdn.docswell.com/page/4L735D5E5P.jpg)

プリミティブアセンブリ V[0] Line[0] V[1] Line[1] V[2] Line[2] V[3] Line[3] V[4] Line Strip

# Page. 47

![Page Image](https://bcdn.docswell.com/page/V87DDPY7GD.jpg)

プリミティブアセンブリ V[0] V[1] Triangle[0] V[3] V[2] V[4] Triangles

# Page. 48

![Page Image](https://bcdn.docswell.com/page/4VJPXN2786.jpg)

プリミティブアセンブリ V[0] V[1] Triangle[0] Triangle[1] V[2] Triangle[2] V[4] V[3] Triangle Strip

# Page. 49

![Page Image](https://bcdn.docswell.com/page/L2EVLKXJQW.jpg)

プリミティブアセンブリ V[0] Line[0] V[1] V[1] Line[1] V[0] V[2] Line[4] Line[2] Line[3] V[4] Line Loop Triangle[0] V[2] Triangle[1] V[3] Triangle[2] V[4] Triangle Fan V[3]

# Page. 50

![Page Image](https://bcdn.docswell.com/page/Z57GXQRELR.jpg)

プリミティブアセンブリ：カリング(オプション)

# Page. 51

![Page Image](https://bcdn.docswell.com/page/V4EQ8KYJP5.jpg)

プリミティブアセンブリ：カリング(オプション)

# Page. 52

![Page Image](https://bcdn.docswell.com/page/DKJ42PZE1Q.jpg)

プリミティブアセンブリ：カリング(オプション)

# Page. 53

![Page Image](https://bcdn.docswell.com/page/PLE1M9D7GD.jpg)

プリミティブアセンブリ：カリング(オプション) 面の向き？

# Page. 54

![Page Image](https://bcdn.docswell.com/page/8GEW3Q8E26.jpg)

プリミティブアセンブリ：カリング(オプション) 0 0 2 1 1 2 時計回り(CW) or 反時計回り(CCW)

# Page. 55

![Page Image](https://bcdn.docswell.com/page/W47ZVW9E3Y.jpg)

頂点列 頂点処理 プリミティブアセンブリ ラスタライズ フラグメント処理 ラスタライズ ピクセル操作 フレームバッファ

# Page. 56

![Page Image](https://bcdn.docswell.com/page/KYJ65GD7VZ.jpg)

ラスタライズ 入力： プリミティブ列 出力： フラグメント列 ラスタライズ

# Page. 57

![Page Image](https://bcdn.docswell.com/page/5GJ5YV8J48.jpg)

ラスタライズ

# Page. 58

![Page Image](https://bcdn.docswell.com/page/V9E2G3VERX.jpg)

ラスタライズ

# Page. 59

![Page Image](https://bcdn.docswell.com/page/5D7YV1Q7M9.jpg)

ラスタライズ フラグメント ・ピクセル座標 ・Z値 ・属性A ・属性B ・. . .

# Page. 60

![Page Image](https://bcdn.docswell.com/page/2VENM22J8K.jpg)

ラスタライズ

# Page. 61

![Page Image](https://bcdn.docswell.com/page/GY79N1D73P.jpg)

ラスタライズ

# Page. 62

![Page Image](https://bcdn.docswell.com/page/5G78K45JDR.jpg)

ラスタライズ：フラグメントの値 P0 s P t P1 t s P= P0 + P1 s+t s+t = w0P0 + w1P1 (w0 + w1 = 1) AP = w0 AP0 + w1AP1 ( AX ：点 X の属性値)

# Page. 63

![Page Image](https://bcdn.docswell.com/page/ML7LZ63ER1.jpg)

ラスタライズ

# Page. 64

![Page Image](https://bcdn.docswell.com/page/54EMV5MEW1.jpg)

ラスタライズ

# Page. 65

![Page Image](https://bcdn.docswell.com/page/ZPER23L79L.jpg)

ラスタライズ：フラグメントの値 t1 s1 Q= P0 + P1 s1 + t1 s1 + t1 t2 s2 P= Q+ P2 s2 + t2 s2 + t2 P0 t1 P1 Q s1 s2 P t 2 = w0P0 + w1P1 + w2P2 P2 (w0 + w1 + w2 = 1) AP = w0 AP0 + w1AP1 + w2 AP2

# Page. 66

![Page Image](https://bcdn.docswell.com/page/NP7XD96JXY.jpg)

頂点列 頂点処理 プリミティブアセンブリ ラスタライズ フラグメント 処理 フラグメント処理 ピクセル操作 フレームバッファ

# Page. 67

![Page Image](https://bcdn.docswell.com/page/637KXPGJDY.jpg)

フラグメント処理 入力： フラグメント列 出力： (色)フラグメント列 フラグメント 処理

# Page. 68

![Page Image](https://bcdn.docswell.com/page/4LJ35X575P.jpg)

フラグメント処理 フラグメント 共通データ ・ピクセル座標 ・属性A ・属性B ・. . . ・Z値 フラグメント シェーダー ・色

# Page. 69

![Page Image](https://bcdn.docswell.com/page/V8JDD2YJGD.jpg)

フラグメント処理 フラグメント 共通データ ・ピクセル座標 (色)フラグメント ・ピクセル座標 ・属性A ・属性B フラグメント シェーダー ・色 ・. . . ・Z値 ・Z値

# Page. 70

![Page Image](https://bcdn.docswell.com/page/4VEPX12J86.jpg)

フラグメント処理：フラグメントシェーダー ・ピクセル座標 ・Z値 ・テクスチャ座標 テクスチャ (共通データ) フラグメントシェーダー ・色

# Page. 71

![Page Image](https://bcdn.docswell.com/page/L27VLYXEQW.jpg)

頂点列 頂点処理 プリミティブアセンブリ ラスタライズ ピクセル 操作 フラグメント処理 ピクセル操作 フレームバッファ

# Page. 72

![Page Image](https://bcdn.docswell.com/page/Z5JGX9R7LR.jpg)

ピクセル操作 入力： (色)フラグメント列 出力： フレームバッファ カラーバッファ ピクセル操作 デプスバッファ ステンシルバッファ

# Page. 73

![Page Image](https://bcdn.docswell.com/page/V47Q8WYEP5.jpg)

ピクセル操作：デプステスト(オプション) 緑を先に書いた場合 水色を先に書いた場合

# Page. 74

![Page Image](https://bcdn.docswell.com/page/DKE42KZ71Q.jpg)

ピクセル操作：デプステスト(オプション) 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 フラグメント フラグメント 0.6 0.6 0.6 0.6 0.6 0.6 0.6 0.6 0.4 0.4 0.4 0.4 通過したZ値を 上書き 0.5 0.5 0.4 0.4 0.2 0.2 0.2 0.2 0.5 0.5 0.5 0.2 デプスバッファ デプスバッファ

# Page. 75

![Page Image](https://bcdn.docswell.com/page/PL71MXDJGD.jpg)

ピクセル操作：ブレンディング(オプション) α× +(1 − α) × =

# Page. 76

![Page Image](https://bcdn.docswell.com/page/8G7W3N8726.jpg)

レンダリング パイプラインの 再構築 Reconstruction

# Page. 77

![Page Image](https://bcdn.docswell.com/page/W4JZV3973Y.jpg)

下準備

# Page. 78

![Page Image](https://bcdn.docswell.com/page/KYE65XDJVZ.jpg)

混ぜ合わせ可能な型 protocol Addable { static func +(lhs:Self, rhs:Self) -&gt; Self } protocol Scalable { static func *(scale:Float, value:Self) -&gt; Self } protocol Blendable : Addable, Scalable { }

# Page. 79

![Page Image](https://bcdn.docswell.com/page/5GE5YX8E48.jpg)

色の準備 struct Color4f : Blendable { let r: Float let g: Float let b: Float let a: Float }

# Page. 80

![Page Image](https://bcdn.docswell.com/page/V972GXV7RX.jpg)

色の準備 struct Color4ui { let r: UInt8 let g: UInt8 let b: UInt8 let a: UInt8 }

# Page. 81

![Page Image](https://bcdn.docswell.com/page/5DJYV8QJM9.jpg)

頂点の準備 class Vertex3&lt;T:Blendable&gt; { var position : float3 var attribute : T . . . } class var var . . } Vertex4&lt;T:Blendable&gt; { position : float4 attribute : T .

# Page. 82

![Page Image](https://bcdn.docswell.com/page/2V7NMQ2E8K.jpg)

フラグメントの準備 class let let let let . . } Fragment&lt;T:Blendable&gt; { x: Int y: Int z: Float attribute: T .

# Page. 83

![Page Image](https://bcdn.docswell.com/page/GYJ9NDDJ3P.jpg)

フレームバッファの準備 protocol BufferPlane { associatedtype CellType var width: Int { get } var height: Int { get } subscript(x: Int, y: Int) -&gt; CellType { get set } }

# Page. 84

![Page Image](https://bcdn.docswell.com/page/5GJ8K35EDR.jpg)

フレームバッファの準備 class ColorBuffer : BufferPlane { let width: Int let height: Int subscript (x: Int, y: Int) -&gt; Color4ui { . . . } }

# Page. 85

![Page Image](https://bcdn.docswell.com/page/MLJLZV37R1.jpg)

フレームバッファの準備 class DepthBuffer : BufferPlane { let width: Int let height: Int subscript (x: Int, y: Int) -&gt; Float { . . . } }

# Page. 86

![Page Image](https://bcdn.docswell.com/page/547MVGM7W1.jpg)

ビューの準備 CALayer

# Page. 87

![Page Image](https://bcdn.docswell.com/page/ZP7R2ZLJ9L.jpg)

ビューポートの準備 class let let let let . . } Viewport { x: Int y: Int width: Int height: Int .

# Page. 88

![Page Image](https://bcdn.docswell.com/page/NPJXD16EXY.jpg)

パイプラインの準備 class RenderPipeline&lt;T:Blendable, U:Blendable&gt; { var vertexBuffer : [Vertex4&lt;T&gt;]! var viewport: Viewport? var vertexShader : ((Vertex4&lt;T&gt;) -&gt; Vertex4&lt;U&gt;)! var fragmentShader : ((Fragment&lt;U&gt;) -&gt; Color4f?)! var colorBuffer : ColorBuffer! var depthBuffer : DepthBuffer? . . . }

# Page. 89

![Page Image](https://bcdn.docswell.com/page/63JKX2GEDY.jpg)

頂点列 頂点処理 頂点処理 の 再構築 プリミティブアセンブリ ラスタライズ フラグメント処理 ピクセル操作 フレームバッファ

# Page. 90

![Page Image](https://bcdn.docswell.com/page/4LE3545J5P.jpg)

頂点処理 let convertedVertices = vertexBuffer.map { (vertex:Vertex4&lt;T&gt;) -&gt; Vertex3&lt;U&gt; in let v = vertexShader(vertex) // divide by w let pos = v.position.project() // Viewport Transformation let screenPosition = transform(position: pos, toViewport: vp) return Vertex3&lt;U&gt;(position: screenPosition, attribute: v.attribute) }

# Page. 91

![Page Image](https://bcdn.docswell.com/page/V8EDDQYEGD.jpg)

プリミティブ アセンブリ の 再構築 頂点列 頂点処理 プリミティブアセンブリ ラスタライズ フラグメント処理 ピクセル操作 フレームバッファ

# Page. 92

![Page Image](https://bcdn.docswell.com/page/4V7PXL2E86.jpg)

プリミティブアセンブリ enum Primitive&lt;T:Blendable&gt; { case point(Vertex3&lt;T&gt;) case line(Vertex3&lt;T&gt;, Vertex3&lt;T&gt;) case triangle(Vertex3&lt;T&gt;, Vertex3&lt;T&gt;, Vertex3&lt;T&gt;) }

# Page. 93

![Page Image](https://bcdn.docswell.com/page/L2JVLQX7QW.jpg)

プリミティブアセンブリ var primitives: [Primitive&lt;U&gt;] . . . let numOfTriangles = convertedVertices.count / 3 primitives = (0..&lt;numOfTriangles).map { Primitive&lt;U&gt;.triangle(convertedVertices[$0*3], convertedVertices[$0*3 + 1], convertedVertices[$0*3 + 2]) }.filter{ (primitive) -&gt; Bool in if cullFace { return primitive.isCCW() } else { return true } }

# Page. 94

![Page Image](https://bcdn.docswell.com/page/Z5EGXWRJLR.jpg)

頂点列 頂点処理 ラスタライズ の 再構築 プリミティブアセンブリ ラスタライズ フラグメント処理 ピクセル操作 フレームバッファ

# Page. 95

![Page Image](https://bcdn.docswell.com/page/V4JQ83Y7P5.jpg)

ラスタライズ var result = [Fragment&lt;U&gt;]() . . .// minX, maxX, minY, maxYを求めておく for py in minY..&lt;maxY { for px in minX..&lt;maxX { let p = float2(Float(px) + 0.5, Float(py) + 0.5) let (w1, w2, w3) = weight(v1: v1, v2: v2, v3: v3, of: p) ?? (-1, -1, -1) if w1 &lt; 0 || w2 &lt; 0 || w3 &lt; 0 { continue } let eachZ = w1 * v1.position.z + w2 * v2.position.z + w3 * v3.position.z let eachAttr = w1 * v1.attribute + w2 * v2.attribute + w3 * v3.attribute result.append(Fragment(x: px, y: py, z: eachZ, attribute: eachAttr)) } }

# Page. 96

![Page Image](https://bcdn.docswell.com/page/DK7421ZJ1Q.jpg)

フラグメント 処理 の 再構築 頂点列 頂点処理 プリミティブアセンブリ ラスタライズ フラグメント処理 ピクセル操作 フレームバッファ

# Page. 97

![Page Image](https://bcdn.docswell.com/page/PLJ1MGDEGD.jpg)

フラグメント処理 // Fragment Processing let fragmentResults = fragments.map{ (fragment) -&gt; Fragment&lt;Color4f&gt;? in if let color = fragmentShader(fragment) { return Fragment&lt;Color4f&gt;( x: fragment.x, y: fragment.y, z: fragment.z, attribute: color) } else { return nil } }.compactMap { $0 }

# Page. 98

![Page Image](https://bcdn.docswell.com/page/8GJW3K8J26.jpg)

ピクセル 操作 の 再構築 頂点列 頂点処理 プリミティブアセンブリ ラスタライズ フラグメント処理 ピクセル操作 フレームバッファ

# Page. 99

![Page Image](https://bcdn.docswell.com/page/W4EZVZ9J3Y.jpg)

ピクセル操作 // Per Sampling Operation fragmentResults.forEach { (fragment) in if let depthBuffer = depthBuffer { if depthBuffer[fragment.x, fragment.y] &gt; fragment.z { return } depthBuffer[fragment.x, fragment.y] = fragment.z } colorBuffer[fragment.x, fragment.y] = fragment.attribute.toColor4ui() }

# Page. 100

![Page Image](https://bcdn.docswell.com/page/KY765ZDEVZ.jpg)

完成

# Page. 101

![Page Image](https://bcdn.docswell.com/page/5G75YW8748.jpg)

DEMO

# Page. 102

![Page Image](https://bcdn.docswell.com/page/V9J2GQVJRX.jpg)

解説：MatCap(Material Captures)

# Page. 103

![Page Image](https://bcdn.docswell.com/page/5DEYVWQEM9.jpg)

解説：MatCap(Material Captures) 1.0 1.0 テクスチャ

# Page. 104

![Page Image](https://bcdn.docswell.com/page/2VJNM9278K.jpg)

解説：MatCap(Material Captures) 1.0 1.0 テクスチャ 単位法線ベクトル

# Page. 105

![Page Image](https://bcdn.docswell.com/page/GYE9N2DE3P.jpg)

解説：MatCap(Material Captures) 1.0 1.0 テクスチャ 半分にして(0.5,0.5)オフセット 単位法線ベクトル

# Page. 106

![Page Image](https://bcdn.docswell.com/page/5GE8K557DR.jpg)

解説：MatCap(Material Captures) 1.0 1.0 テクスチャ 単位法線ベクトル

# Page. 107

![Page Image](https://bcdn.docswell.com/page/MLELZY3JR1.jpg)

まとめ

# Page. 108

![Page Image](https://bcdn.docswell.com/page/54JMVNMJW1.jpg)

まとめ ・レンダリングパイプラインは作れる

# Page. 109

![Page Image](https://bcdn.docswell.com/page/ZPJR2DLE9L.jpg)

まとめ ・レンダリングパイプラインは作れる ・自分で作ってみると理解が深まる

# Page. 110

![Page Image](https://bcdn.docswell.com/page/NPEXD267XY.jpg)

まとめ ・レンダリングパイプラインは作れる ・自分で作ってみると理解が深まる ・GPUすごい

# Page. 111

![Page Image](https://bcdn.docswell.com/page/63EKXMG7DY.jpg)

まとめ ・レンダリングパイプラインは作れる ・自分で作ってみると理解が深まる ・GPUすごい ・今どきのスマートフォンのCPUもすごい

# Page. 112

![Page Image](https://bcdn.docswell.com/page/4L735Y5E5P.jpg)

まとめ ・レンダリングパイプラインは作れる ・自分で作ってみると理解が深まる ・GPUすごい ・今どきのスマートフォンのCPUもすごい ・プログラミング楽しい

# Page. 113

![Page Image](https://bcdn.docswell.com/page/V87DD5Y7GD.jpg)

Enjoy Programming!!

# Page. 114

![Page Image](https://bcdn.docswell.com/page/4VJPXG2786.jpg)

テクスチャマッピング素材： https://www.3dxo.com/textures 顔素材： わたし MatCap素材： https://www.pixelfondue.com/blog/30matcaps

