Skip to content

Instantly share code, notes, and snippets.

@mfeineis

mfeineis/ElmWebGLResources.md

Created March 24, 2018 11:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mfeineis/e062d8e1fa0cb0281851a16ede18d450 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mfeineis/e062d8e1fa0cb0281851a16ede18d450 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mfeineis created this gist Mar 24, 2018.
    25 changes: 25 additions & 0 deletions ElmWebGLResources.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    rlking [11:39 AM]
    There is this site https://persona.co which has all these nice background effects, which seems to be made with webgl. I’d like to make an Elm lib containing some. 1 Would it be possible? 2 What’s a good place to start? I assume webgl basics, but any other tips regarding image manipulation? (edited)
    Stuff like this as well http://boyce.io & http://philrhie.com (edited)

    passiomatic [11:56 AM]
    At least on the http://philrhie.com they use `canvas` so it could be WebGL.
    philrhie.com
    Phil Rhie, LA-based designer. :us::kr:
    Persona

    unsoundscapes [12:05 PM]
    @rlking I think this could be broken onto:
    1. Learn about the clip space coordinates (-1..1 on all axis) & how to render a rectangle that is made of two triangles (with a solid color in the fragment shader)
    2. Learn about varyings, and how to look up pixels from the texture. Load the texture and render it on the rectangle
    3. Learn about glsl fragment shader programming (check the examples on https://www.shadertoy.com), add the animation frame or mouse subscriptions and wire them into the fragment shader via uniforms. Use them to alter the pixel lookup behavior from the texture to achieve the desired effect. (edited)
    I’ve built some examples while learning webgl https://github.com/w0rm/elm-webgl-playground maybe Animation2D.elm could be helpful to know how to render a texture and Shadertoy.elm how to wire subscriptions and integrate a shadertoy example with an Elm program
    Also, just read the docs from the http://package.elm-lang.org/packages/elm-community/webgl/latest package and study the examples there (edited)
    For step 3 you can use https://developer.mozilla.org/en-US/docs/Tools/Shader_Editor to live edit the fragment shader code. (edited)

    rlking [12:14 PM]
    awesome thanks

    passiomatic [12:16 PM]
    IF you want a more organic theory intro look to https://webglfundamentals.org and skip JS examples :slightly_smiling_face: (edited)
    Once you grasped the basics you can look at Elm WebGL API which is a lot nicer that the barebones WebGL API :slightly_smiling_face: