🏡🌐🌼

implementing gradient maps and luts with svg

resource collection

Resources

  1. web gpu overview - https://surma.dev/things/webgpu/
  2. image dithering - https://surma.dev/things/ditherpunk/
  3. dither me this (the tool) - https://doodad.dev/dither-me-this/
  4. dither me this (the code) - https://github.com/DitheringIdiot/dither-me-this
  5. svg fm (the tool) - https://svgfm.chriskirknielsen.com/
  6. svg fm (the code) - https://github.com/chriskirknielsen/svgfm
  7. 2d look-up tables with c++ - https://github.com/NTProductions/2D-LUTs
  8. nvidia’s extremely technical guide on LUTs -https://developer.nvidia.com/gpugems/gpugems2/part-iii-high-quality-rendering/chapter-24-using-lookup-tables-accelerate-color
  9. shaders with p5.js - https://www.youtube.com/watch?v=3mfvZ-mdtZQ
  10. svg tableValues - https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/tableValues

Knowledge and Possible Outcomes

I really like the look that Gradient Maps give to images, videos and filters. I was also aware that LUTs can pre-process the colours in an image before displaying them. Using these two things together should provide me the solution I’m looking for, but I don’t even know where to start???

How I got to know about these things

  1. Gradient Maps - from Photoshop and Procreate
  2. LUTs - from that one Facebook AR filter creation app, Blender
  1. A
  2. B

How do I even go about this? Creating a 1D LUT may make most sense, along with using that one

No song is playing :(