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

56ffef8ea4a48c8560b825f7f14ef4a9?s=47 ta_ka_tsu
September 02, 2018

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

iOSDC 2018 発表資料

56ffef8ea4a48c8560b825f7f14ef4a9?s=128

ta_ka_tsu

September 02, 2018
Tweet

Transcript

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

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

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

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

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

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

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

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

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

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

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

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

  13. ɾ఺ ɾઢ ɾࡾ֯ܗ ϨϯμϦϯά ύΠϓϥΠϯͰඳ͚Δ΋ͷ

  14. ɾ఺ ɾઢ ɾࡾ֯ܗ ϙϦΰϯ ϓϦϛςΟϒ ϓϦϛςΟϒ

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

  16. ௖఺ଐੑ ௖఺ଐੑ ɾҐஔ

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

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

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

  20. ϨϯμϦϯάύΠϓϥΠϯͷೖग़ྗ ௖఺ྻ ύΠϓϥΠϯ ϨϯμϦϯά ϑϨʔϜόοϑΝ

  21. ϨϯμϦϯάύΠϓϥΠϯͷೖग़ྗ ௖఺ྻ ύΠϓϥΠϯ ϨϯμϦϯά ϑϨʔϜόοϑΝ

  22. ϨϯμϦϯάύΠϓϥΠϯͷೖग़ྗ ௖఺ྻ 6OJGPSN ڞ௨σʔλ ύΠϓϥΠϯ ϨϯμϦϯά ϑϨʔϜόοϑΝ

  23. ϨϯμϦϯάύΠϓϥΠϯͷೖग़ྗ ௖఺ྻ ύΠϓϥΠϯ ϨϯμϦϯά ϑϨʔϜόοϑΝ ඳը໋ྩ %SBX$BMM 6OJGPSN ڞ௨σʔλ

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

  25. ϨϯμϦϯάύΠϓϥΠϯͷೖग़ྗ ௖఺ྻ ϑϨʔϜόοϑΝ 6OJGPSN ڞ௨σʔλ ύΠϓϥΠϯ ϨϯμϦϯά

  26. ϨϯμϦϯάύΠϓϥΠϯͷೖग़ྗ ௖఺ྻ ϓϦϛςΟϒΞηϯϒϦ ௖఺ॲཧ ϥελϥΠζ ϑϥάϝϯτॲཧ ϐΫηϧૢ࡞ 6OJGPSN ڞ௨σʔλ ϑϨʔϜόοϑΝ

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

  28. ௖఺ॲཧ ௖఺ྻ ೖྗɿ ௖఺ྻ ग़ྗɿ ௖఺ॲཧ

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

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

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

    y ≦ 1 0 ≦ z ≦ 1
  32. ௖఺ॲཧɿΫϦοϐϯά

  33. ௖఺ॲཧɿΫϦοϐϯά

  34. ௖఺ॲཧɿΫϦοϐϯά

  35. ௖఺ॲཧɿΫϦοϐϯά

  36. ௖఺ॲཧɿΫϦοϐϯά

  37. ௖఺ॲཧɿΫϦοϐϯά

  38. ௖఺ॲཧɿΫϦοϐϯά

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

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

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

    ϓϦϛςΟϒΞηϯϒϦ
  42. ϓϦϛςΟϒΞηϯϒϦ ௖఺ྻ ೖྗɿ ϓϦϛςΟϒྻ ग़ྗɿ ϓϦϛςΟϒ ΞηϯϒϦ

  43. ϓϦϛςΟϒΞηϯϒϦ V[0] V[1] V[2] V[3] V[4]

  44. 1PJOUT ϓϦϛςΟϒΞηϯϒϦ V[1] V[2] V[3] V[4] Point[0] Point[1] Point[2] Point[3]

    Point[4] V[0]
  45. -JOFT ϓϦϛςΟϒΞηϯϒϦ V[0] V[1] V[2] V[3] V[4] Line[0] Line[1]

  46. -JOF4USJQ ϓϦϛςΟϒΞηϯϒϦ V[0] V[1] V[2] V[3] V[4] Line[0] Line[1] Line[2]

    Line[3]
  47. 5SJBOHMFT ϓϦϛςΟϒΞηϯϒϦ V[0] V[1] V[2] V[3] V[4] Triangle[0]

  48. 5SJBOHMF4USJQ ϓϦϛςΟϒΞηϯϒϦ V[0] V[1] V[2] V[3] V[4] Triangle[0] Triangle[1] Triangle[2]

  49. 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]
  50. ϓϦϛςΟϒΞηϯϒϦɿΧϦϯά Φϓγϣϯ

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

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

  53. ϓϦϛςΟϒΞηϯϒϦɿΧϦϯά Φϓγϣϯ ໘ͷ޲͖ʁ

  54. 0 2 1 ࣌ܭճΓ $8 ϓϦϛςΟϒΞηϯϒϦɿΧϦϯά Φϓγϣϯ 0 1 2

    ൓࣌ܭճΓ $$8 PS
  55. ϥελϥΠζ ϓϦϛςΟϒΞηϯϒϦ ϑϥάϝϯτॲཧ ϐΫηϧૢ࡞ ϑϨʔϜόοϑΝ ௖఺ྻ ௖఺ॲཧ ϥελϥΠζ

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

  57. ϥελϥΠζ

  58. ϥελϥΠζ

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

  60. ϥελϥΠζ

  61. ϥελϥΠζ

  62. ϥελϥΠζɿϑϥάϝϯτͷ஋ 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 ͷଐੑ஋
  63. ϥελϥΠζ

  64. ϥελϥΠζ

  65. ϥελϥΠζɿϑϥάϝϯτͷ஋ 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
  66. ϑϥά ϝϯτ ॲཧ ϓϦϛςΟϒΞηϯϒϦ ϐΫηϧૢ࡞ ϑϨʔϜόοϑΝ ௖఺ྻ ௖఺ॲཧ ϥελϥΠζ ϑϥάϝϯτॲཧ

  67. ϑϥάϝϯτॲཧ ৭ ϑϥάϝϯτྻ ग़ྗɿ ϑϥάϝϯτྻ ೖྗɿ ϑϥάϝϯτ ॲཧ

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

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

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

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

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

  73. ϐΫηϧૢ࡞ɿσϓεςετ Φϓγϣϯ ྘Λઌʹॻ͍ͨ৔߹ ਫ৭Λઌʹॻ͍ͨ৔߹

  74. ϐΫηϧૢ࡞ɿσϓεςετ Φϓγϣϯ ௨աͨ͠;஋Λ ্ॻ͖ 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 σϓεόοϑΝ ϑϥά ϝϯτ ϑϥά ϝϯτ
  75. ϐΫηϧૢ࡞ɿϒϨϯσΟϯά Φϓγϣϯ α × +(1 − α) × =

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

  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 Vertex4<T:Blendable> { var position : float4 var attribute : T . . . }
  82. ϑϥάϝϯτͷ४උ class Fragment<T:Blendable> { let x: Int let y: Int

    let z: Float let attribute: T . . . }
  83. ϑϨʔϜόοϑΝͷ४උ protocol BufferPlane { associatedtype CellType var width: Int {

    get } var height: Int { get } subscript(x: Int, y: Int) -> CellType { get set } }
  84. class ColorBuffer : BufferPlane { let width: Int let height:

    Int subscript (x: Int, y: Int) -> Color4ui { . . . } } ϑϨʔϜόοϑΝͷ४උ
  85. class DepthBuffer : BufferPlane { let width: Int let height:

    Int subscript (x: Int, y: Int) -> Float { . . . } } ϑϨʔϜόοϑΝͷ४උ
  86. Ϗϡʔͷ४උ CALayer

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

    let width: Int let height: Int . . . }
  88. ύΠϓϥΠϯͷ४උ 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. ௖఺ॲཧ 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. ϓϦϛςΟϒΞηϯϒϦ 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. ϥελϥΠζ 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. ϑϥά ϝϯτॲཧ // 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. %&.0

  102. ղઆɿ.BU$BQ .BUFSJBM$BQUVSFT

  103. ղઆɿ.BU$BQ .BUFSJBM$BQUVSFT ςΫενϟ 1.0 1.0

  104. ղઆɿ.BU$BQ .BUFSJBM$BQUVSFT ςΫενϟ 1.0 1.0 ୯Ґ๏ઢϕΫτϧ

  105. ղઆɿ.BU$BQ .BUFSJBM$BQUVSFT ςΫενϟ 1.0 1.0 ୯Ґ๏ઢϕΫτϧ ൒෼ʹͯ͠   Φϑηοτ

  106. ղઆɿ.BU$BQ .BUFSJBM$BQUVSFT ςΫενϟ 1.0 1.0 ୯Ґ๏ઢϕΫτϧ

  107. ·ͱΊ

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

  109. ·ͱΊ ɾϨϯμϦϯάύΠϓϥΠϯ͸࡞ΕΔ ɾࣗ෼Ͱ࡞ͬͯΈΔͱཧղ͕ਂ·Δ

  110. ·ͱΊ ɾϨϯμϦϯάύΠϓϥΠϯ͸࡞ΕΔ ɾࣗ෼Ͱ࡞ͬͯΈΔͱཧղ͕ਂ·Δ ɾ(16͍͢͝

  111. ·ͱΊ ɾϨϯμϦϯάύΠϓϥΠϯ͸࡞ΕΔ ɾࣗ෼Ͱ࡞ͬͯΈΔͱཧղ͕ਂ·Δ ɾ(16͍͢͝ ɾࠓͲ͖ͷεϚʔτϑΥϯͷ$16΋͍͢͝

  112. ·ͱΊ ɾϨϯμϦϯάύΠϓϥΠϯ͸࡞ΕΔ ɾࣗ෼Ͱ࡞ͬͯΈΔͱཧղ͕ਂ·Δ ɾ(16͍͢͝ ɾϓϩάϥϛϯάָ͍͠ ɾࠓͲ͖ͷεϚʔτϑΥϯͷ$16΋͍͢͝

  113. &OKPZ 1SPHSBNNJOH

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