Look ma, no graphics card!

Software-based 3D rendering in Elm

Julian Antonielli

Dec 8th, 2021

What's in a 3D "engine"?

WebGL.toHtml : List (Attribute msg) -> List Entity -> Html msg

WebGL.entity :
    Shader attributes uniforms varyings
    -> Shader {} uniforms varyings
    -> Mesh attributes
    -> uniforms
    -> Entity

What's in a 3D "engine"?

WebGL.entity :

	Shader attributes uniforms varyings ->

	Shader {} uniforms varyings ->

	Mesh attributes ->

	uniforms ->

	Entity

What's in a 3D "engine"?

WebGL.entity :

	Shader attributes uniforms varyings ->

	Shader {} uniforms varyings ->

	Mesh attributes ->

	uniforms ->

	Entity

bunch of triangles

Meshes

type alias Mesh attributes =
    List (Triangle attributes)

type alias Triangle attributes =
    ( attributes, attributes, attributes )

What's in a 3D "engine"?

WebGL.entity :

	Shader attributes uniforms varyings ->

	Shader {} uniforms varyings ->

	Mesh attributes ->

	uniforms ->

	Entity

bunch of triangles

"VertexShader"

https://www.uni-weimar.de/fileadmin/user/fak/medien/professuren/Computer_Graphics/CG_WS_18_19/CG/03_Shaders.pdf

"VertexShader"

https://www.davrous.com/2020/03/22/understanding-shaders-the-secret-sauce-of-3d-engines/

What's in a 3D "engine"?

WebGL.entity :

	Shader attributes uniforms varyings ->

	Shader {} uniforms varyings ->

	Mesh attributes ->

	uniforms ->

	Entity

bunch of triangles

VertexShader

"PixelShader"

https://www.davrous.com/2020/03/22/understanding-shaders-the-secret-sauce-of-3d-engines/

What's in a 3D "engine"?

WebGL.entity :

	Shader attributes uniforms varyings ->

	Shader {} uniforms varyings ->

	Mesh attributes ->

	uniforms ->

	Entity

bunch of triangles

VertexShader

PixelShader

random (user defined) data

Introducing ElmGL

ElmGL.render :
    { width : Int, height : Int, pixelSize : Int }
    -> Entity uniforms attributes varyings
    -> Html msg

ElmGL.entity :
    VertexShader attributes uniforms varyings
    -> PixelShader uniforms varyings
    -> Mesh attributes
    -> uniforms
    -> ???
    -> Entity uniforms attributes varyings

Introducing ElmGL

ElmGL.entity :

	VertexShader attributes uniforms varyings ->

	PixelShader uniforms varyings ->

	Mesh attributes ->

	uniforms ->

	??? ->

	Entity uniforms attributes varyings

Introducing ElmGL

type alias VertexShader uniforms attributes varyings =
    uniforms -> attributes -> { position : Vec3, varyings : varyings }


type alias PixelShader uniforms varyings =
    uniforms -> varyings -> Color
    

type alias Mesh attributes =
    List (Triangle attributes)


type alias Triangle attributes =
    ( attributes, attributes, attributes )

Introducing ElmGL

ElmGL.entity :

	VertexShader attributes uniforms varyings ->

	PixelShader uniforms varyings ->

	Mesh attributes ->

	uniforms ->

	Impl varyings ->

	Entity uniforms attributes varyings

Introducing ElmGL

type alias Impl varyings =
    { add : varyings -> varyings -> varyings
    , sub : varyings -> varyings -> varyings
    , scale : Float -> varyings -> varyings
    }


emptyImpl : Impl {}
emptyImpl =
    { add = \_ _ -> {}
    , sub = \_ _ -> {}
    , scale = \_ _ -> {}
    }

Our first triangle

type alias Uniforms = {}

type alias Attributes = Vec2

type alias Varyings = {}

entity : Entity Uniforms Attributes Varyings
entity =
    { mesh = mesh
    , uniforms = {}
    , vertexShader = vertexShader
    , pixelShader = pixelShader
    , impl = Renderer.emptyImpl
    }

Our first triangle

mesh : Mesh Attributes
mesh =
    let bottomLeft = vec2 -1 -1
        topMiddle = vec2 0 1
        bottomRight = vec2 1 -1
    in
    [ (bottomLeft, topMiddle, bottomRight)]


vertexShader : VertexShader Uniforms Attributes Varyings
vertexShader uniforms pos =
    { position = vec3 pos.x pos.y 1
    , varyings = {}
    }


pixelShader : PixelShader Uniforms Varyings
pixelShader uniforms varyings =
    Color.red

Thanks!

References:

Julian Antonielli

Dec 8th, 2021

Elm 3D Graphics

By jjant

Look ma, no graphics card!

Thanks!

Elm 3D Graphics

More from jjant