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

࡞ͬͯΘ͔Δ
ϨϯμϦϯά
ύΠϓϥΠϯ
d$16Ͱ%ඳըd
iOSDC Japan 2018

View Slide

!UB@LB@UTV
ذෞݝࡏॅ
ࣗݾ঺հ

View Slide

!UB@LB@UTV
ذෞݝࡏॅ
ࣗݾ঺հ
%$"%ܥϓϩάϥϚʔ

View Slide

!UB@LB@UTV
ذෞݝࡏॅ
ࣗݾ঺հ
%$"%ܥϓϩάϥϚʔ
%$".ܥϓϩάϥϚʔ

View Slide

!UB@LB@UTV
ذෞݝࡏॅ
ࣗݾ঺հ
%$"%ܥϓϩάϥϚʔ
%$".ܥϓϩάϥϚʔ
ձࣾઃཱ

View Slide

!UB@LB@UTV
ذෞݝࡏॅ
ࣗݾ঺հ
%$"%ܥϓϩάϥϚʔ
%$".ܥϓϩάϥϚʔ
ϑϦʔϥϯεˡ/PX
ձࣾઃཱ

View Slide

֓ཁ
ཧղ
෼ղ
࠶ߏங
ϨϯμϦϯά
ύΠϓϥΠϯͷ

View Slide

ཧղ
ϨϯμϦϯά
ύΠϓϥΠϯͷ
6OEFSTUBOEJOH

View Slide

σʔλ͔Βը૾ͳͲΛಘΔ͜ͱ
ϨϯμϦϯά
ύΠϓϥΠϯͱ͸
ϨϯμϦϯάɿ
ෳ਺ͷॲཧΛ௚ྻʹܨ͍ͩҰ࿈ͷॲཧ
ύΠϓϥΠϯɿ
%άϥϑΟοΫεΛܭࢉ͢Δ
ॲཧํࣜͷͭ

View Slide

ϨϯμϦϯά
ύΠϓϥΠϯͰඳ͚Δ΋ͷ
ɾ఺

View Slide

ɾ఺
ɾઢ
ϨϯμϦϯά

View Slide

ɾ఺
ɾઢ
ɾࡾ֯ܗ
ϨϯμϦϯά

View Slide

ɾ఺
ɾઢ
ɾࡾ֯ܗ ϙϦΰϯ

ϓϦϛςΟϒ
ϓϦϛςΟϒ

View Slide

ɾ఺ʜ௖఺ͭ
ɾઢʜ௖఺ͭ
ɾࡾ֯ܗʜ௖఺ͭ
ϓϦϛςΟϒ

View Slide

௖఺ଐੑ
௖఺ଐੑ
ɾҐஔ

View Slide

௖఺ଐੑ
ɾ৭
௖఺ଐੑ
ɾҐஔ

View Slide

௖఺ଐੑ
ɾ৭
௖఺ଐੑ
ɾҐஔ
ɾ๏ઢϕΫτϧ
ɾʜ
ɾςΫενϟ࠲ඪ

View Slide

%σʔλ
ύΠϓϥΠϯ
ϨϯμϦϯά
ϑϨʔϜόοϑΝ
ϨϯμϦϯάύΠϓϥΠϯͷೖग़ྗ

View Slide

௖఺ྻ
ύΠϓϥΠϯ
ϨϯμϦϯά
ϑϨʔϜόοϑΝ

View Slide

௖఺ྻ
6OJGPSN

ڞ௨σʔλ
ύΠϓϥΠϯ
ϨϯμϦϯά
ϑϨʔϜόοϑΝ

View Slide

௖఺ྻ
ύΠϓϥΠϯ
ϨϯμϦϯά
ϑϨʔϜόοϑΝ
ඳը໋ྩ
%SBX$BMM

6OJGPSN

ڞ௨σʔλ

View Slide

%FDPNQPTJUJPO
෼ղ
ϨϯμϦϯά
ύΠϓϥΠϯͷ

View Slide

௖఺ྻ
ϑϨʔϜόοϑΝ
6OJGPSN

ڞ௨σʔλ
ύΠϓϥΠϯ
ϨϯμϦϯά

View Slide

௖఺ྻ
ϓϦϛςΟϒΞηϯϒϦ
௖఺ॲཧ
ϥελϥΠζ
ϑϥάϝϯτॲཧ
ϐΫηϧૢ࡞
6OJGPSN

ڞ௨σʔλ
ϑϨʔϜόοϑΝ

View Slide

௖఺ॲཧ
ϥελϥΠζ
ϑϥάϝϯτॲཧ
ϐΫηϧૢ࡞
ϑϨʔϜόοϑΝ
௖఺ྻ
௖఺ॲཧ

View Slide

௖఺ॲཧ
௖఺ྻ
ೖྗɿ
௖఺ྻ
ग़ྗɿ
௖఺ॲཧ

View Slide

௖఺ॲཧɿ௖఺γΣʔμʔ
௖఺
௖఺
௖఺γΣʔμʔ
ڞ௨σʔλ
ɾଐੑ"
ɾҐஔ
ɾଐੑ#
ɾଐੑ$
ɾଐੑ%
ɾҐஔ
ɾଐੑ&

View Slide

௖఺ॲཧɿ௖఺γΣʔμʔ
ɾ৭
ɾҐஔ
ɾ๏ઢϕΫτϧ
ɾ৭
ɾҐஔ
௖఺ଐੑ
௖఺ଐੑ
௖఺γΣʔμʔ

View Slide

௖఺ॲཧɿΫϦοϐϯά
ΫϦοϐϯάۭؒ
.FUBMͰ͸
−1 ≦ x ≦ 1
−1 ≦ y ≦ 1
0 ≦ z ≦ 1

View Slide

௖఺ॲཧɿΫϦοϐϯά

View Slide

௖఺ॲཧɿϏϡʔϙʔτม׵
ΫϦοϐϯάۭؒ Ϗϡʔ
Ϗϡʔϙʔτ
Y
Z

View Slide

ϓϦ
ϛ
ςΟϒ
ΞηϯϒϦ
ϥελϥΠζ
ϑϥάϝϯτॲཧ
ϐΫηϧૢ࡞
ϑϨʔϜόοϑΝ
௖఺ྻ
௖఺ॲཧ

View Slide

௖఺ྻ
ೖྗɿ
ϓϦϛςΟϒྻ
ग़ྗɿ
ϓϦϛςΟϒ
ΞηϯϒϦ

View Slide

V[0]
V[1]
V[2]
V[3]
V[4]

View Slide

1PJOUT
V[1]
V[2] V[3]
V[4]
Point[0]
Point[1]
Point[2]
Point[3]
Point[4]
V[0]

View Slide

-JOFT
V[0]
V[1]
V[2] V[3]
V[4]
Line[0]
Line[1]

View Slide

-JOF4USJQ
V[0]
V[1]
V[2] V[3]
V[4]
Line[0]
Line[1]
Line[2]
Line[3]

View Slide

5SJBOHMFT
V[0]
V[1]
V[2] V[3]
V[4]
Triangle[0]

View Slide

5SJBOHMF4USJQ
V[0]
V[1]
V[2] V[3]
V[4]
Triangle[0]
Triangle[1]
Triangle[2]

View Slide

5SJBOHMF'BO
-JOF-PPQ
Triangle[0]
Triangle[1]
Triangle[2]
Line[0]
Line[1]
Line[2]
Line[3]
Line[4]
V[0]
V[1]
V[2]
V[3]
V[4] V[4]
V[0]
V[1]
V[2]
V[3]

View Slide

ϓϦϛςΟϒΞηϯϒϦɿΧϦϯά Φϓγϣϯ

View Slide


໘ͷ޲͖ʁ

View Slide

0
2 1
࣌ܭճΓ $8


0
1 2
൓࣌ܭճΓ $$8

PS

View Slide

ϥελϥΠζ
ϑϥάϝϯτॲཧ
ϐΫηϧૢ࡞
ϑϨʔϜόοϑΝ
௖఺ྻ
௖఺ॲཧ
ϥελϥΠζ

View Slide

ϥελϥΠζ
ϓϦϛςΟϒྻ
ೖྗɿ
ϑϥάϝϯτྻ
ग़ྗɿ
ϥελϥΠζ

View Slide

ϥελϥΠζ

View Slide

ϥελϥΠζ
ϑϥάϝϯτ
ɾ;஋
ɾϐΫηϧ࠲ඪ
ɾଐੑ"
ɾଐੑ#
ɾ

View Slide

ϥελϥΠζ

View Slide

ϥελϥΠζɿϑϥάϝϯτͷ஋
P0
P1
P
s
t
P =
t
s + t
P0
+
s
s + t
P1
= w0
P0
+ w1
P1
(w0
+ w1
= 1)
AP
= w0
AP0
+ w1
AP1
AX
ɿ఺ X ͷଐੑ஋

View Slide

ϥελϥΠζ

View Slide

ϥελϥΠζɿϑϥάϝϯτͷ஋
P0
P1
Q
s1
t1
Q =
t1
s1
+ t1
P0
+
s1
s1
+ t1
P1
= w0
P0
+ w1
P1
+ w2
P2
(w0
+ w1
+ w2
= 1)
P
P2
s2
t2
P =
t2
s2
+ t2
Q +
s2
s2
+ t2
P2
AP
= w0
AP0
+ w1
AP1
+ w2
AP2

View Slide

ϑϥά
ϝϯτ
ॲཧ
ϐΫηϧૢ࡞
ϑϨʔϜόοϑΝ
௖఺ྻ
௖఺ॲཧ
ϥελϥΠζ
ϑϥάϝϯτॲཧ

View Slide

ϑϥάϝϯτॲཧ
৭
ϑϥάϝϯτྻ
ग़ྗɿ
ϑϥάϝϯτྻ
ೖྗɿ
ϑϥάϝϯτ
ॲཧ

View Slide

ϑϥάϝϯτॲཧ
ϑϥά
ϝϯτ
ɾϐΫηϧ࠲ඪ
ɾଐੑ"
ɾଐੑ#
ɾ;஋
ɾ৭
ɾ
ڞ௨σʔλ
ϑϥάϝϯτ
γΣʔμʔ

View Slide

ϑϥάϝϯτॲཧ
ϑϥά
ϝϯτ
ɾϐΫηϧ࠲ඪ
ɾଐੑ"
ɾଐੑ#
ɾ;஋
ɾϐΫηϧ࠲ඪ
ɾ৭
ɾ;஋
ɾ
ڞ௨σʔλ ৭
ϑϥά
ϝϯτ
ϑϥάϝϯτ
γΣʔμʔ

View Slide

ϑϥάϝϯτॲཧɿϑϥάϝϯτγΣʔμʔ
ϑϥάϝϯτγΣʔμʔ
ɾϐΫηϧ࠲ඪ
ɾςΫενϟ࠲ඪ
ɾ৭
ςΫενϟ
ڞ௨σʔλ

ɾ;஋

View Slide

ϐΫηϧ
ૢ࡞
ϑϨʔϜόοϑΝ
௖఺ྻ
௖఺ॲཧ
ϥελϥΠζ
ϑϥάϝϯτॲཧ
ϐΫηϧૢ࡞

View Slide

ϐΫηϧૢ࡞
ϑϨʔϜόοϑΝ
ग़ྗɿ
৭
ϑϥάϝϯτྻ
ೖྗɿ
ϐΫηϧૢ࡞
ΧϥʔόοϑΝ
σϓεόοϑΝ
εςϯγϧόοϑΝ

View Slide

ϐΫηϧૢ࡞ɿσϓεςετ Φϓγϣϯ

྘Λઌʹॻ͍ͨ৔߹ ਫ৭Λઌʹॻ͍ͨ৔߹

View Slide

ϐΫηϧૢ࡞ɿσϓεςετ Φϓγϣϯ

௨աͨ͠;஋Λ
্ॻ͖
0.6
0.4
0.2
σϓεόοϑΝ
0.6
0.4
0.2
0.6
0.4
0.2
0.6
0.4
0.2
0.5
0.5
0.5
0.5
0.5 0.5
0.6
0.5
0.5
0.6
0.5
0.5
0.6
0.4
0.5
0.6
0.4
0.2
0.5
0.5
0.5
0.5 0.5
σϓεόοϑΝ
ϑϥά
ϝϯτ ϑϥά
ϝϯτ

View Slide

ϐΫηϧૢ࡞ɿϒϨϯσΟϯά Φϓγϣϯ

α × +(1 − α) × =

View Slide

3FDPOTUSVDUJPO
࠶ߏங
ϨϯμϦϯά
ύΠϓϥΠϯͷ

View Slide

Լ४උ

View Slide

ࠞͥ߹ΘͤՄೳͳܕ
protocol Addable {
static func +(lhs:Self, rhs:Self) -> Self
}
protocol Scalable {
static func *(scale:Float, value:Self) -> Self
}
protocol Blendable : Addable, Scalable {
}

View Slide

৭ͷ४උ
struct Color4f : Blendable {
let r: Float
let g: Float
let b: Float
let a: Float
}

View Slide

৭ͷ४උ
struct Color4ui {
let r: UInt8
let g: UInt8
let b: UInt8
let a: UInt8
}

View Slide

௖఺ͷ४උ
class Vertex3 {
var position : float3
var attribute : T
. . .
}
class Vertex4 {
var position : float4
var attribute : T
. . .
}

View Slide

ϑϥάϝϯτͷ४උ
class Fragment {
let x: Int
let y: Int
let z: Float
let attribute: T
. . .
}

View Slide

ϑϨʔϜόοϑΝͷ४උ
protocol BufferPlane {
associatedtype CellType
var width: Int { get }
var height: Int { get }
subscript(x: Int, y: Int) -> CellType { get set }
}

View Slide

class ColorBuffer : BufferPlane {
let width: Int
let height: Int
subscript (x: Int, y: Int) -> Color4ui {
. . .
}
}

View Slide

class DepthBuffer : BufferPlane {
let width: Int
let height: Int
subscript (x: Int, y: Int) -> Float {
. . .
}
}

View Slide

Ϗϡʔͷ४උ
CALayer

View Slide

Ϗϡʔϙʔτͷ४උ
class Viewport {
let x: Int
let y: Int
let width: Int
let height: Int
. . .
}

View Slide

ύΠϓϥΠϯͷ४උ
class RenderPipeline {
var vertexBuffer : [Vertex4]!
var viewport: Viewport?
var vertexShader : ((Vertex4) -> Vertex4)!
var fragmentShader : ((Fragment) -> Color4f?)!
var colorBuffer : ColorBuffer!
var depthBuffer : DepthBuffer?
. . .
}

View Slide

௖఺ॲཧ ϓϦϛςΟϒΞηϯϒϦ
ϥελϥΠζ
ϑϥάϝϯτॲཧ
ϐΫηϧૢ࡞
ϑϨʔϜόοϑΝ
௖఺ྻ
௖఺ॲཧ
ͷ
࠶ߏங

View Slide

௖఺ॲཧ
let convertedVertices = vertexBuffer.map {
(vertex:Vertex4) -> Vertex3 in
let v = vertexShader(vertex)
// divide by w
let pos = v.position.project()
// Viewport Transformation
let screenPosition = transform(position: pos, toViewport: vp)
return Vertex3(position: screenPosition, attribute: v.attribute)
}

View Slide

ϓϦ
ϛ
ςΟϒ
ΞηϯϒϦ
ϥελϥΠζ
ϑϥάϝϯτॲཧ
ϐΫηϧૢ࡞
ϑϨʔϜόοϑΝ
௖఺ྻ
௖఺ॲཧ
ͷ
࠶ߏங

View Slide

enum Primitive {
case point(Vertex3)
case line(Vertex3, Vertex3)
case triangle(Vertex3, Vertex3, Vertex3)
}

View Slide

var primitives: [Primitive]
. . .
let numOfTriangles = convertedVertices.count / 3
primitives = (0..Primitive.triangle(convertedVertices[$0*3],
convertedVertices[$0*3 + 1],
convertedVertices[$0*3 + 2])
}.filter{ (primitive) -> Bool in
if cullFace { return primitive.isCCW() }
else { return true }
}

View Slide

ϥελϥΠζ ϓϦϛςΟϒΞηϯϒϦ
ϑϥάϝϯτॲཧ
ϐΫηϧૢ࡞
ϑϨʔϜόοϑΝ
௖఺ྻ
௖఺ॲཧ
ϥελϥΠζ
ͷ
࠶ߏங

View Slide

ϥελϥΠζ
var result = [Fragment]()
. . .// minX, maxX, minY, maxYΛٻΊ͓ͯ͘
for py in minY..for px in minX..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))
}
}

View Slide

ͷ
࠶ߏங
ϑϥά
ϝϯτ
ॲཧ ϓϦϛςΟϒΞηϯϒϦ
ϐΫηϧૢ࡞
ϑϨʔϜόοϑΝ
௖఺ྻ
௖఺ॲཧ
ϥελϥΠζ
ϑϥάϝϯτॲཧ

View Slide

ϑϥά
ϝϯτॲཧ
// Fragment Processing
let fragmentResults =
fragments.map{ (fragment) -> Fragment? in
if let color = fragmentShader(fragment) {
return Fragment(
x: fragment.x,
y: fragment.y,
z: fragment.z,
attribute: color)
}
else { return nil }
}.compactMap { $0 }

View Slide

ͷ
࠶ߏங
ϐΫηϧ
ૢ࡞ ϓϦϛςΟϒΞηϯϒϦ
ϑϨʔϜόοϑΝ
௖఺ྻ
௖఺ॲཧ
ϥελϥΠζ
ϑϥάϝϯτॲཧ
ϐΫηϧૢ࡞

View Slide

ϐΫηϧૢ࡞
// 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()
}

View Slide

׬੒

View Slide

%&.0

View Slide

ղઆɿ.BU$BQ .BUFSJBM$BQUVSFT

View Slide


ςΫενϟ
1.0
1.0

View Slide


ςΫενϟ
1.0
1.0
୯Ґ๏ઢϕΫτϧ

View Slide


ςΫενϟ
1.0
1.0
୯Ґ๏ઢϕΫτϧ
൒෼ʹͯ͠
Φϑηοτ

View Slide


ςΫενϟ
1.0
1.0
୯Ґ๏ઢϕΫτϧ

View Slide

·ͱΊ

View Slide

·ͱΊ
ɾϨϯμϦϯάύΠϓϥΠϯ͸࡞ΕΔ

View Slide

·ͱΊ
ɾࣗ෼Ͱ࡞ͬͯΈΔͱཧղ͕ਂ·Δ

View Slide

·ͱΊ
ɾ(16͍͢͝

View Slide

·ͱΊ
ɾ(16͍͢͝
ɾࠓͲ͖ͷεϚʔτϑΥϯͷ$16΋͍͢͝

View Slide

·ͱΊ
ɾ(16͍͢͝
ɾϓϩάϥϛϯάָ͍͠
ɾࠓͲ͖ͷεϚʔτϑΥϯͷ$16΋͍͢͝

View Slide

&OKPZ
1SPHSBNNJOH

View Slide

ςΫενϟϚοϐϯάૉࡐɿ
https://www.3dxo.com/textures
إૉࡐɿ
Θͨ͠
MatCapૉࡐɿ
https://www.pixelfondue.com/blog/30matcaps

View Slide

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

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

ta_ka_tsu

More Decks by ta_ka_tsu

Other Decks in Technology

Featured

Transcript