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

プリミティブアセンブリ 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]

50.

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

51.

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

52.

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

53.

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

54.

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

55.

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

56.

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

57.

ラスタライズ

58.

ラスタライズ

59.

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

60.

ラスタライズ

61.

ラスタライズ

62.

ラスタライズ：フラグメントの値 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 の属性値)

63.

ラスタライズ

64.

ラスタライズ

65.

ラスタライズ：フラグメントの値 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

66.

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

67.

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

68.

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

69.

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

70.

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

71.

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

72.

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

73.

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

74.

ピクセル操作：デプステスト(オプション) 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 デプスバッファデプスバッファ

75.

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

76.

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

77.

下準備

78.

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

79.

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

80.

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

81.

頂点の準備 class Vertex3<T:Blendable> { var position : float3 var attribute : T . . . } class var var . . } Vertex4<T:Blendable> { position : float4 attribute : T .

82.

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

83.

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

84.

[beta]

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

85.

[beta]

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

86.

ビューの準備 CALayer

87.

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

88.

[beta]

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

89.

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

90.

[beta]

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

91.

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

92.

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

93.

[beta]

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

94.

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

95.

[beta]

ラスタライズ var result = [Fragment<U>]() . . .// minX, maxX, minY, maxYを求めておく for py in minY..<maxY { for px in minX..<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 < 0 || w2 < 0 || w3 < 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)) } }

96.

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

97.

[beta]

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

98.

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

99.

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

100.

完成

101.

DEMO

102.

解説：MatCap(Material Captures)

103.

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

104.

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

105.

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