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. 🇺🇸🇰🇷
Persona
unsoundscapes [12:05 PM] @rlking I think this could be broken onto:
- 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)
- Learn about varyings, and how to look up pixels from the texture. Load the texture and render it on the rectangle
- 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 🙂 (edited) Once you grasped the basics you can look at Elm WebGL API which is a lot nicer that the barebones WebGL API 🙂