<a href="https://tympanus.net/codrops/2021/01/19/drawing-2d-metaballs-with-webgl2/">D</a><a href="https://tympanus.net/codrops/2021/01/19/drawing-2d-metaballs-with-webgl2/" target="_blank" rel="noreferrer noopener">rawing 2D Metaballs with WebGL2</a>

Metaballs / Julie Bonnemoy

Similar Implementation: <a href="https://www.dfy.co.kr/" target="_blank" rel="noreferrer noopener">https://www.dfy.co.kr/</a>

Drawing a Line in the Path of the Mouse Pointer / Synchronized

<a href="https://ics.media/entry/5535/">How to create image processing in WebGL shader GLSL (monochrome, sepia, mosaic, swirl) in Japanese</a>

GLSL Mosaic Effect / Control

step 04

<a href="https://tympanus.net/codrops/2019/10/23/making-gooey-image-hover-effects-with-three-js/">Making Gooey Image Hover Effects with Three.js &#8211; Codrops</a>

GLSL Gooey Image Hover Effect / Liron Moran Interiors

<a href="https://kohimoto.com/labo/study/%E7%94%BB%E5%83%8F%E3%81%8C%E3%81%90%E3%81%AB%E3%82%83%E3%81%A3%E3%81%A8%E5%88%87%E3%82%8A%E6%9B%BF%E3%82%8F%E3%82%8B%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9-webgl/">How to make a slide with a jerky image change &#8211; WebGL</a> (in Japanese)



<a href="https://note.com/kenji_special/n/n79bfbe02767c">Copy and paste to get used to the raw WebGL#01 Distortion effect</a> <meta charset="utf-8">(in Japanese)

GLSL Carousel / Rupert & Rothschild Vignerons

Multi-side Refraction Step 3/3 (forked)

<a href="https://tympanus.net/codrops/2019/10/29/real-time-multiside-refraction-in-three-steps/">Real-time Multiside Refraction in Three Steps</a>



<a href="https://wgld.org/d/webgl/w046.html">Refraction Mapping (This article is in Japanese)</a>



<a href="https://threejs.org/examples/webgl_materials_cubemap.html" target="_blank" rel="noreferrer noopener">Three</a><a href="https://threejs.org/examples/webgl_materials_cubemap.html">.js &#8211; Cube Mapping Demo</a>



<a href="https://wgld.org/d/webgl/w044.html">Cube Environment Mapping (This article is in Japanese)</a>



When exporting to GLB format in Blender and importing in Three.js, if anything other than Mesh or Texture is included, it may not display properly. Removing the camera, lights, etc. will allow Three.js to import correctly.



It&#8217;s a good idea to use the <a href="https://gltf-viewer.donmccurdy.com/">glTF Viewer</a> to check if anything is included that you don&#8217;t need.

Real-time Multiside Refraction / IQOSA

SVG Logo Drawing Effect / Cycles Cavale

<a href="https://qiita.com/nishinoshake/items/b91236c77b1987036656">I want to implement a nice animation for counting up numbers. (This article is in Japanese)</a>

Easing Number Counting Up / 125 Years of TPU

If you don&#8217;t support IE11, it is simple to use Background Clip.

Visual