$30 off During Our Annual Pro Sale. View Details »

Design a Voxel Rendering Engine for iOS - iOSConf.SG 2017

Shipeng Xu
October 20, 2017

Design a Voxel Rendering Engine for iOS - iOSConf.SG 2017

Design a Voxel Rendering Engine for iOS.

Shipeng Xu

October 20, 2017
Tweet

Other Decks in Technology

Transcript

  1. Design a Voxel Rendering
    Engine for iOS
    Shipeng Xu
    20 Oct 2017
    @1991bill

    View Slide

  2. What is Voxel?
    ● Volume Pixel
    ● Data Structure
    ○ Integral X, Y, Z coordinates
    ○ Color
    Pokemon Voxel, Playiku, 2016

    View Slide

  3. View Slide

  4. Voxel Rendering Engine for iOS
    ● Rendering
    ○ Beautiful
    ● Performance
    ○ Blocks can be added or removed at interactive speeds
    ○ E.g. A 64x64x64 voxel world = 262,144 voxels!
    Add Delete Move
    Change Color

    View Slide

  5. Rendering - 1 Voxel
    12 Triangles

    View Slide

  6. Rendering - 5,911 Voxels

    View Slide

  7. Rendering - Meshing
    ● Naive way...
    ● Draw a 3D cube for each voxel.
    ○ 5,911 Voxels
    ○ 5,911 x 12 = 70,932 triangles

    View Slide

  8. Rendering - Meshing
    ● Skip the unseen voxels
    ○ Before: 5,911 Voxels
    ■ 5,911 x 12 = 70,932 triangles
    ○ After: 5,868 triangles
    ■ 8.2% of original

    View Slide

  9. Rendering - Meshing

    View Slide

  10. ● Combine small faces into bigger ones
    Rendering - Meshing
    280 Triangles 22 Triangles(7.9%!)

    View Slide

  11. Rendering - Lighting

    View Slide

  12. Rendering - Ambient Occlusion

    View Slide

  13. Rendering - Ambient Occlusion
    Occlusion level
    3
    2
    1
    0

    View Slide

  14. Rendering - Ambient Occlusion

    View Slide

  15. X Basic Lighting
    X Ambient Occlusion
    ✔ Basic Lighting
    X Ambient Occlusion
    ✔ Basic Lighting
    ✔ Ambient Occlusion
    Rendering - Lighting

    View Slide

  16. Links
    ● Voxel Meshing - https://0fps.net/category/programming/voxels/
    ● Voxel Rendering Techniques -
    https://medium.com/@fogleman/voxel-rendering-techniques-fa8d869457
    ca
    ● Volume Rendering -
    http://bytebash.com/2012/03/opengl-volume-rendering/
    ● http://shipeng.studio

    View Slide