# Speeding up WebGL program

**URL:** <https://discourse.elm-lang.org/t/speeding-up-webgl-program/8114>\
**Category:** Learn\
**Created:** [January 29, 2022, 7:29pm UTC](https://discourse.elm-lang.org/t/speeding-up-webgl-program/8114 "2022-01-29T19:29:01Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lucas\_Payr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lucas_payr/32/4993_2.png) [@Lucas\_Payr](https://discourse.elm-lang.org/u/Lucas_Payr)\
**Post date:** [January 29, 2022, 7:29pm UTC](https://discourse.elm-lang.org/t/speeding-up-webgl-program/8114/1 "2022-01-29T19:29:01Z")

</div>

Hi there,  
I wanted to implement the [Reaction-Diffusion Algorithm](https://www.karlsims.com/rd.html) and notices that I can’t get past 4 FPS. [(JS implementations have typically a stable 60 FPS)](https://pmneila.github.io/jsexp/grayscott/)

How it should look like after a couple of seconds:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/8/82c8c6514d2f77185ae0a78adc0ff33c0f4fd46c.jpeg)

[My Implemenation](https://ellie-app.com/gxKbQYCmkwja1)

So why is Elm/WebGL that slow? How can i improve the calculations?

* * *

For some context: I’m working on an Elm package for writing generative Art. The reaction-diffusion algorithm is an essential part of this package. If I find out that it is defacto impossible to pull off a fast Reaction-Diffusion Algorithm in Elm, I can throw my package in the bin.

---

<div class="post-metadata">

**Author:** ![Sidney](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/sidney/32/3290_2.png) [@Sidney](https://discourse.elm-lang.org/u/Sidney)\
**Post date:** [January 29, 2022, 9:23pm UTC](https://discourse.elm-lang.org/t/speeding-up-webgl-program/8114/2 "2022-01-29T21:23:00Z")

</div>

The example you linked performs very well because it runs the Gray-Scott algorithm on the GPU, rather than the CPU. It uses a feature of WebGL where it renders to a texture. Elm doesn’t expose an API to do this so I don’t think it can be written with pure Elm at this point.

---

<div class="post-metadata">

**Author:** ![Lucas\_Payr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lucas_payr/32/4993_2.png) [@Lucas\_Payr](https://discourse.elm-lang.org/u/Lucas_Payr)\
**Post date:** [January 30, 2022, 5:05am UTC](https://discourse.elm-lang.org/t/speeding-up-webgl-program/8114/3 "2022-01-30T05:05:43Z")

</div>

Quick update: I now believe that it has nothing to do with WebGL.

[I’ve created a new Ellie.](https://ellie-app.com/gxTZkfX7D6Na1)

I’ve replaced the Dict with an Array → im now getting 14 Frames locally, 7 in Ellie.

Also i added a way to skip frames (`renderEvery` on line 55). If this would be a WebGL issue, then the frames should not change when increasing `renderEvery`. But in fact when doubling it, the fps drop by half.

Another observation: removing the laplace function gets me up to 60 fps in Ellie. Heres the laplace function:

```auto
convolution : List ( ( Int, Int ), Float )
convolution =
    [[ 0.05, 0.2, 0.05]
    , [0.2, -1, 0.2]
    , [0.05, 0.2, 0.05]
    ]
        |> List.indexedMap
            (\j list ->
                list
                    |> List.indexedMap (\i factor -> ( ( i, j ), factor ))
            )
        |> List.concat

get : ( Int, Int ) -> Array (Array a) -> Maybe a
get ( i, j ) grid =
    grid
        |> Array.get j
        |> Maybe.andThen (Array.get i)

laplace : (( Float, Float ) -> Float) -> ( Int, Int ) -> Array (Array ( Float, Float )) -> Float
laplace fun ( x, y ) dict =
    convolution
        |> List.map
            (\( ( i, j ), factor ) ->
                (dict
                    |> get ( x - 1 + i, y - 1 + j )
                    |> Maybe.map fun
                    |> Maybe.withDefault (fun ( 1, 0 ))
                )
                    * factor
            )
        |> List.sum

```

For a given point it sums up the neighbors (using the weights defined in convolution). Every cell has two values, thats why i need to pass `fun` along, the function is currently called twice per cell: once with `fun = Tuple.first` and once with `fun = Tuple.second`. My next experiment will be to get rid of `fun`. This should theoretically double the fps.

---

<div class="post-metadata">

**Author:** ![unsoundscapes](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/unsoundscapes/32/410_2.png) [@unsoundscapes](https://discourse.elm-lang.org/u/unsoundscapes)\
**Post date:** [January 30, 2022, 10:31am UTC](https://discourse.elm-lang.org/t/speeding-up-webgl-program/8114/4 "2022-01-30T10:31:09Z")

</div>

@Lucas_Payr on WebGL performance, read the “Making the most of the GPU” section of the package docs [webgl 1.1.3](https://package.elm-lang.org/packages/elm-explorations/webgl/1.1.3/) that is also linked from the [Mesh](https://package.elm-lang.org/packages/elm-explorations/webgl/1.1.3/WebGL) docs.

In the nutshell, WebGL API in Elm is not meant for creating meshes in the view on each frame, because each time such mesh would have to be uploaded to GPU, that is a rather slow operation. The mesh needs to be created and cached in the model or globally, then reused.

Given your use case, I don’t think the current WebGL API works well, because it is not suitable for manipulating individual pixels on the screen.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [February 9, 2022, 10:31am UTC](https://discourse.elm-lang.org/t/speeding-up-webgl-program/8114/5 "2022-02-09T10:31:28Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.