Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

If I had to choose one thing to do, it would be just coding WebGL flowers It's a GLSL shader, a full-screen plane, and 2 render targets to swap on each frame Live demo & source code: Made with Three.js Hosted on CodePen.IO Special thanks to The Book of Shaders

Ksenia Kondrashova

8,802 subscribers

51,886 views • 3 years ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Draw GLSL flowers with your cursor! 🌺 One full-screen plane, two render targets, and a bit of shader magic Live demo & source code: Made with Three.js Hosted on CodePen.IO Special thanks to The Book of Shaders #webgl #glsl #threejs #shader #drawingtool

Draw GLSL flowers with your cursor! 🌺 One full-screen plane, two render targets, and a bit of shader magic Live demo & source code: Made with Three.js Hosted on CodePen.IO Special thanks to The Book of Shaders #webgl #glsl #threejs #shader #drawingtool

Ksenia Kondrashova

28,620 views • 3 years ago

New #WebGL pattern! A Voronoi diagram (love it) with eyes calculated over the polar coordinates of each cell. No images or graphic libs here, just a #GLSL shader wrapped with JS Live demo & source code: Hosted on CodePen.IO Special thx to The Book of Shaders

New #WebGL pattern! A Voronoi diagram (love it) with eyes calculated over the polar coordinates of each cell. No images or graphic libs here, just a #GLSL shader wrapped with JS Live demo & source code: Hosted on CodePen.IO Special thx to The Book of Shaders

Ksenia Kondrashova

35,396 views • 2 years ago

$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$

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

16,008 views • 3 years ago

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

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

Ksenia Kondrashova

43,711 views • 1 year ago

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

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,771 views • 3 years ago

It's October, my dudes! I've redone one of my fav old works. The updates: - transparent background - no extra libs so just <15kb of code - parameters that are easy to change without going through the shader Live demo & source code: Hosted on CodePen.IO

It's October, my dudes! I've redone one of my fav old works. The updates: - transparent background - no extra libs so just <15kb of code - parameters that are easy to change without going through the shader Live demo & source code: Hosted on CodePen.IO

Ksenia Kondrashova

99,480 views • 2 years ago

If you want to see a technical breakdown of the 35mm website, I wrote a blog post on Codrops where I detail the Three.js/shaders code ! It's live on Codrops🔗⬇️

If you want to see a technical breakdown of the 35mm website, I wrote a blog post on Codrops where I detail the Three.js/shaders code ! It's live on Codrops🔗⬇️

chakib

14,962 views • 1 year ago

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

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,622 views • 2 years ago

I keep seeing the same pattern with Three.js games, shaders, p5.js, and now 3D UI. Give a coding agent a strong reference, the live URL, and the source repo. It can study the mechanics, recreate them, and give you a working place to experiment. For this one, I turned a Trevor Noah-inspired book interaction into fictional manuals for Codex, Claude Code, and Cursor. X post: GitHub: Original site:

I keep seeing the same pattern with Three.js games, shaders, p5.js, and now 3D UI. Give a coding agent a strong reference, the live URL, and the source repo. It can study the mechanics, recreate them, and give you a working place to experiment. For this one, I turned a Trevor Noah-inspired book interaction into fictional manuals for Codex, Claude Code, and Cursor. X post: GitHub: Original site:

Meng To

180,453 views • 1 month ago

Bitspace now supports GLSL shaders. Write a fragment shader - and your uniforms automatically creates inputs on the Shader node. These inputs can be used to pipe colors, vectors or whatever from the rest of your Bitspace environment. new fragment

Bitspace now supports GLSL shaders. Write a fragment shader - and your uniforms automatically creates inputs on the Shader node. These inputs can be used to pipe colors, vectors or whatever from the rest of your Bitspace environment. new fragment

emil

32,949 views • 1 year ago

New favorite noise function! I had lots of fun tweaking the yonatan shader and ended up using it as a semi-transparent overlay With color changing on scroll and slight cursor response, the total code size is still <9 kb 🫣 Live demo & source code: Original algorithm:

New favorite noise function! I had lots of fun tweaking the yonatan shader and ended up using it as a semi-transparent overlay With color changing on scroll and slight cursor response, the total code size is still <9 kb 🫣 Live demo & source code: Original algorithm:

Ksenia Kondrashova

20,374 views • 2 years ago

I planned on releasing my Three.js WebGPU water shader 2 weeks ago, but I promised myself I would stop half-assing things this year. I'm glad I waited. I'll be selling the whole package for $99. Full demo video coming soon, but includes FFT water sim, underwater effects, dynamic sky + fog, buoyancy, and more. Every aspect is tunable. Comes with 8 presets and 4 quality levels so it will run on any device. You'll get full source code + demo code, plus all future updates and fixes. Join waitlist now and get an email for 20% off at launch #threejs #webgpu #shaders

I planned on releasing my Three.js WebGPU water shader 2 weeks ago, but I promised myself I would stop half-assing things this year. I'm glad I waited. I'll be selling the whole package for $99. Full demo video coming soon, but includes FFT water sim, underwater effects, dynamic sky + fog, buoyancy, and more. Every aspect is tunable. Comes with 8 presets and 4 quality levels so it will run on any device. You'll get full source code + demo code, plus all future updates and fixes. Join waitlist now and get an email for 20% off at launch #threejs #webgpu #shaders

Dan Greenheck

50,738 views • 7 months ago

So I got on a plane and it had nothing to do with fights …. true story.

So I got on a plane and it had nothing to do with fights …. true story.

Marc Goddard

27,894 views • 1 month ago

I had access to Opus 5 before release and found it to be a good model if a quirky one. On shorter tasks, it could match or beat Fable levels of performance, at longer tasks it seemed less ambitious & would not deliver as complete a set of work. Here is its neo-gothic shader.

I had access to Opus 5 before release and found it to be a good model if a quirky one. On shorter tasks, it could match or beat Fable levels of performance, at longer tasks it seemed less ambitious & would not deliver as complete a set of work. Here is its neo-gothic shader.

Ethan Mollick

101,569 views • 1 month ago

TypeGPU 💜 Three.js TypeGPU 0.9 can integrate with Three.js Shading Language (TSL) on a very granular level, thanks to the @typegpu/three package. So now, you can write shaders in TypeScript while leveraging the rich Three.js ecosystem! To showcase the integration, we prepared docs and ported a handful of official Three.js examples 👇

TypeGPU 💜 Three.js TypeGPU 0.9 can integrate with Three.js Shading Language (TSL) on a very granular level, thanks to the @typegpu/three package. So now, you can write shaders in TypeScript while leveraging the rich Three.js ecosystem! To showcase the integration, we prepared docs and ported a handful of official Three.js examples 👇

Software Mansion

42,869 views • 7 months ago

All my demos in one place! I have released a site with over 25 of my demos over the years all updated and fixed with code on GitHub and each one individually runnable. Many more to come! Check it out: #threejs #webgl #creativecoding #portfolio

All my demos in one place! I have released a site with over 25 of my demos over the years all updated and fixed with code on GitHub and each one individually runnable. Many more to come! Check it out: #threejs #webgl #creativecoding #portfolio

Faraz

12,064 views • 1 year ago

This isn’t a 3D model file. It’s 100% code Our world-famous Mars Cat avatar has been reconstructed entirely as Three.js source code No GLB at runtime. No model download. No textures or UV atlas. Just code, rendered directly in the browser It was created with IMG2THREEJS by Nick. An incredible open-source project with over 15,000 stars on GitHub And our Mars Cat is now featured on the home page gallery See it live below ↓. Grab the code. Add it to your game New to Three.js? It’s one of the most popular open-source JavaScript libraries for building interactive 3D experiences and games on the web

Jay B 😻🚀

12,010 views • 5 days ago

$This is most satisfying thing I've ever made ☺️🔨 I've been working on adding Voronoi fracturing to three-piñata, my open-source mesh fracturing library for Three.js. This creates much more realistic fracture patterns. If you want to learn how to do this, I'm going to be adding a course to Three.js Roadmap teaching you how to build destructible environments. If you're interested, be sure to sign up for my newsletter to get notified when the course is released! (Link in comments 👇🏻) #threejs #webgl #3dgraphics #threejsroadmap$

This is most satisfying thing I've ever made ☺️🔨 I've been working on adding Voronoi fracturing to three-piñata, my open-source mesh fracturing library for Three.js. This creates much more realistic fracture patterns. If you want to learn how to do this, I'm going to be adding a course to Three.js Roadmap teaching you how to build destructible environments. If you're interested, be sure to sign up for my newsletter to get notified when the course is released! (Link in comments 👇🏻) #threejs #webgl #3dgraphics #threejsroadmap

Dan Greenheck

10,573 views • 10 months ago