elm-explorations / webgl

Functional rendering with WebGL in Elm
https://package.elm-lang.org/packages/elm-explorations/webgl/latest/
BSD 3-Clause "New" or "Revised" License
116 stars 17 forks source link

Mesh generation in view clarification #4

Closed reginaldlouis closed 5 years ago

reginaldlouis commented 6 years ago

In your documentation, you said

Do not generate meshes in view, read more about this here

I didn't see any way of the alternative. All your example call WebGL.toHtml that end up generating a mesh on the fly.

Did a miss something? Can you clarify what you mean by that? I supposed it's better to generate the mesh on a init function and store them the application state somehow?

Thx!

RoganMurley commented 5 years ago

@reginaldlouis Every mesh generated is cached and never freed, so generating a new mesh every render causes a memory leak. Instead generate a mesh at the top-level outside the view so that it is only cached once.

For example:

import Math.Vector2 exposing (vec2)
import Math.Vector3 exposing (vec3)
import WebGL

quad : WebGL.Mesh Vertex
quad =
    let
        topRight =
            { position = vec3 1 1 0, coord = vec2 0 1 }

        bottomRight =
            { position = vec3 1 -1 0, coord = vec2 0 0 }

        bottomLeft =
            { position = vec3 -1 -1 0, coord = vec2 1 0 }

        topLeft =
            { position = vec3 -1 1 0, coord = vec2 1 1 }
    in
        WebGL.triangles
            [ ( topLeft, topRight, bottomLeft )
            , ( bottomLeft, topRight, bottomRight )
            ]
reginaldlouis commented 5 years ago

Understood. Thx you!! On Mon, Oct 8, 2018 at 7:46 AM Rogan Murley notifications@github.com wrote:

@reginaldlouis https://github.com/reginaldlouis Every mesh generated is cached and never freed, so generating a new mesh every render causes a memory leak. Instead generate a mesh at the top-level outside the view so that it is only cached once.

For example:

import Math.Vector2 exposing (vec2) import Math.Vector3 exposing (vec3) import WebGL

quad : WebGL.Mesh Vertex quad = let topRight = { position = vec3 1 1 0, coord = vec2 0 1 }

    bottomRight =
        { position = vec3 1 -1 0, coord = vec2 0 0 }

    bottomLeft =
        { position = vec3 -1 -1 0, coord = vec2 1 0 }

    topLeft =
        { position = vec3 -1 1 0, coord = vec2 1 1 }
in
    WebGL.triangles
        [ ( topLeft, topRight, bottomLeft )
        , ( bottomLeft, topRight, bottomRight )
        ]

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/elm-explorations/webgl/issues/4#issuecomment-427803785, or mute the thread https://github.com/notifications/unsubscribe-auth/AJpB2yYC47w4jeNEYGLX5-UmDaXRBJ2yks5uizsZgaJpZM4Wuw_D .

-- /RL

w0rm commented 5 years ago

If you feel that the docs can be improved, please open a PR!