Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

I wanted to create a broken glass effect with WebGL for a long time! Here it is: interactive, lightweight (around 10KB of GLSL + vanilla JS), and easy to customise (find more controls on codepen) Live demo & source code: Hosted on CodePen.IO

uuuuuulala's profile picture

Ksenia Kondrashova

8,688 subscribers

43,624 Aufrufe • vor 1 Jahr •via X (Twitter)

Wissenschaft & TechnologieKunst
LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

GLSL fire shader based on Simplex noise with a static SVG overlay. No interactivity this time, just sketching on Saturday night ¯\_(ツ)_/¯ Live demo & source code: Made with Three.js Hosted on CodePen.IO
0:14

GLSL fire shader based on Simplex noise with a static SVG overlay. No interactivity this time, just sketching on Saturday night ¯\_(ツ)_/¯ Live demo & source code: Made with Three.js Hosted on CodePen.IO

Ksenia Kondrashova

15,991 Aufrufe • vor 3 Jahren

Rube Goldberg HTML form! Tbh I spent way too much time on this one haha. As fun as it is useless :) Live demo & source code: Hosted on CodePen.IO Made with #GSAP GSAP
0:19

Rube Goldberg HTML form! Tbh I spent way too much time on this one haha. As fun as it is useless :) Live demo & source code: Hosted on CodePen.IO Made with #GSAP GSAP

Ksenia Kondrashova

65,282 Aufrufe • vor 1 Jahr

This glass configurator has no custom shaders or geometries. Just MeshPhysicalMaterial and a bunch of standard geometries with rendering order set manually. Not 100% realistic but super simple Live demo & source code: Made with Three.js Hosted on CodePen.IO
0:16

This glass configurator has no custom shaders or geometries. Just MeshPhysicalMaterial and a bunch of standard geometries with rendering order set manually. Not 100% realistic but super simple Live demo & source code: Made with Three.js Hosted on CodePen.IO

Ksenia Kondrashova

59,734 Aufrufe • vor 3 Jahren

A swinging robot 🤖 Pure #CSS. Live demo and full code on @codepen:
0:16

A swinging robot 🤖 Pure #CSS. Live demo and full code on @codepen:

Amit Sheen

13,485 Aufrufe • vor 1 Jahr

made this interactive pattern with GLSL code for a website I'm working on
0:14

made this interactive pattern with GLSL code for a website I'm working on

OneBit

218,601 Aufrufe • vor 1 Jahr

A Three.js and GLSL mathematical lattice engine that morphs between four geometric topologies, with a glass dock for shape switching and a live telemetry overlay calculating phase coherence. Demo and code 👇
0:15

A Three.js and GLSL mathematical lattice engine that morphs between four geometric topologies, with a glass dock for shape switching and a live telemetry overlay calculating phase coherence. Demo and code 👇

Techartist

14,069 Aufrufe • vor 1 Monat

Fluid simulation on normal HTML elements, using VFX-JS. You can try it on Codepen (link below) #WebGL #VFXJS
0:10

Fluid simulation on normal HTML elements, using VFX-JS. You can try it on Codepen (link below) #WebGL #VFXJS

𝘼𝙈𝘼𝙂𝙄

19,887 Aufrufe • vor 3 Monaten

On a mission to make buttons that stand out. - For this one, I played around with liquid glass mixed with a 3D effect on hover, how's it look?
0:14

On a mission to make buttons that stand out. - For this one, I played around with liquid glass mixed with a 3D effect on hover, how's it look?

Camden @ Designownow

15,547 Aufrufe • vor 8 Monaten

[LIVE DEMO] Check out our latest WebGL demo, exploring a fluid cellular particle effect. Full write up and details of what's going on under the hood coming soon 🔍 Live → #webgl #realtime #threejs
0:12

[LIVE DEMO] Check out our latest WebGL demo, exploring a fluid cellular particle effect. Full write up and details of what's going on under the hood coming soon 🔍 Live → #webgl #realtime #threejs

Unseen Studio®

12,111 Aufrufe • vor 1 Jahr

For a recent (unreleased) project I got to play around with SDF shapes to create lens blur effects on interaction — #shaders #webgl #threejs
0:17

For a recent (unreleased) project I got to play around with SDF shapes to create lens blur effects on interaction — #shaders #webgl #threejs

Giom

132,519 Aufrufe • vor 2 Jahren

Skywork Matrix-Game 3.0 is here! FULLY OPEN SOURCE! Real-Time and Streaming Interactive World Model with Long-Horizon Memory - Fully open source: code, model, and technical report - 720p @ 40FPS with a 5B model - Minute-long memory consistency - Trained on Unreal Engine + AAA games + real-world data - Scales up to 28B MoE for quality, dynamics, and generalization Homepage 👉 Code 👉 Model 👉 Tech report 👉 Create. Explore. Play. With Matrix-Game 3.0
0:15

Skywork Matrix-Game 3.0 is here! FULLY OPEN SOURCE! Real-Time and Streaming Interactive World Model with Long-Horizon Memory - Fully open source: code, model, and technical report - 720p @ 40FPS with a 5B model - Minute-long memory consistency - Trained on Unreal Engine + AAA games + real-world data - Scales up to 28B MoE for quality, dynamics, and generalization Homepage 👉 Code 👉 Model 👉 Tech report 👉 Create. Explore. Play. With Matrix-Game 3.0

Skywork

54,660 Aufrufe • vor 3 Monaten

Fork of an old demo - "Liquid glass" effect using #threejs MeshPhysicalMaterial with a fully ray marched surface made of SDFs Live: Code:
0:10

Fork of an old demo - "Liquid glass" effect using #threejs MeshPhysicalMaterial with a fully ray marched surface made of SDFs Live: Code:

Faraz

25,887 Aufrufe • vor 1 Jahr

Update on my lightweight intercom alternative that runs on a $5 a month server. The widget is almost ready. It took more work than I expected. I spent a lot of time making it light on websites and thinking through interactions and UI. Built with Go and Vue, and I’ll open source it soon.
0:14

Update on my lightweight intercom alternative that runs on a $5 a month server. The widget is almost ready. It took more work than I expected. I spent a lot of time making it light on websites and thinking through interactions and UI. Built with Go and Vue, and I’ll open source it soon.

Fayaz Ahmed

60,335 Aufrufe • vor 8 Monaten

I built a website where you can browse the #threejs shaders code by expanding the <includes> in place. It gives a better understanding of what the code is doing without having to open each file individually. #glsl #WebGL
0:12

I built a website where you can browse the #threejs shaders code by expanding the <includes> in place. It gives a better understanding of what the code is doing without having to open each file individually. #glsl #WebGL

grgrdvrt

23,573 Aufrufe • vor 1 Jahr

"Interactive Hover Spotlight with Smooth Follow Effect" by Sam García
0:11

"Interactive Hover Spotlight with Smooth Follow Effect" by Sam García

CodePen.IO

13,796 Aufrufe • vor 1 Jahr

Over the weekend, I started learning SwiftUI. After spending some time to learn the basics, with the help of ChatGPT and of GLSL coding knowledge, I created my very first app. More info and source code shared below 🧶
0:12

Over the weekend, I started learning SwiftUI. After spending some time to learn the basics, with the help of ChatGPT and of GLSL coding knowledge, I created my very first app. More info and source code shared below 🧶

vijay verma

167,156 Aufrufe • vor 3 Jahren

Thanos Effect? I think it’s perfect naming. All code finally available on CodePen. Snap responsibly
0:10

Thanos Effect? I think it’s perfect naming. All code finally available on CodePen. Snap responsibly

Mike Bespalov

108,216 Aufrufe • vor 1 Jahr

someone stop me, I am playing around with particles again stack used: - threejs - javascript - shaders written in glsl more 3D sketches made with javascript and their source code completely open-source 👇🏼
0:15

someone stop me, I am playing around with particles again stack used: - threejs - javascript - shaders written in glsl more 3D sketches made with javascript and their source code completely open-source 👇🏼

Sagar ✭

219,607 Aufrufe • vor 1 Jahr

Saw a dot grid effect from Antonin Brener.work on Insta and wanted to create something similar for typing in an input. The input border effect is using border-beam by Jakub Antalik Try here:
0:10

Saw a dot grid effect from Antonin Brener.work on Insta and wanted to create something similar for typing in an input. The input border effect is using border-beam by Jakub Antalik Try here:

Zsolt Kacso

20,928 Aufrufe • vor 2 Monaten

3D Landing Page Template (Source Code - Free)! built with - Next.js - Tailwind CSS - Three.js - GSAP A lightweight, visually impactful 3D Demo + Source Code (Free) : 1st comment 👇
0:12

3D Landing Page Template (Source Code - Free)! built with - Next.js - Tailwind CSS - Three.js - GSAP A lightweight, visually impactful 3D Demo + Source Code (Free) : 1st comment 👇

Mohamed Djoudir

49,049 Aufrufe • vor 6 Monaten