Threejs image effect using custom shaders , merging WebGL and html images. This tutorial covers advanced techniques like wave animations, magnet effects, and scaling on hover, making it perfect for developers looking to elevate their frontend skills with WebGL and Three.js. Includes project boilerplate for hands-on learning.

threejs image wave effect 

Recreate the webgl image effects on taotajima.jp website using threejs and custom glsl shaders

Codevember 2021 is a creative coding showcase by Spite, featuring mesmerizing 3D experiments and visual art created with WebGL and Three.js. Each piece demonstrates innovative techniques and artistic use of code to produce dynamic, interactive visuals. <h3>Highlights:</h3><ul><li>A collection of unique 3D and generative art pieces.</li><li>Showcases advanced WebGL and Three.js capabilities.</li><li>Inspires developers and designers to explore creative coding.</li></ul>This project is a great resource for anyone interested in the intersection of art and technology, offering insights into pushing the boundaries of 3D web graphics.

Codevember 2021 by Spite

Codevember 2021 is a creative coding showcase by Spite

hex-to-gsl

This captivating phenomenon creates a&nbsp;stunning optical effect&nbsp;that adds a touch of enchantment to your r3f projects, especially for sun lights.&nbsp;Ultimate Lens Flare&nbsp;creates mesmerizing circular or hexagonal bursts of light. Embrace the magic and elevate your projects with this unique and alluring effect. This captivating optical innovation introduces a new dimension to your content, amplifying its visual impact and captivating your audience. Unlock a world of possibilities with Ultimate Lens Flare's intuitive interface. Seamlessly adjust parameters such as brightness, star points, glare size, ghosts, burst and much more, while real-time previews allow you to see the impact of your adjustments instantly. Embrace your creativity and effortlessly bring your artistic vision to life.

Ultimate Lens Flare for React Three Fiber

A Post processing effect for React Three Fiber, Ultimate Lens flare adds the optical aberration.

OffscreenCanvasOffscreenCanvas is a web API that enables rendering graphics in a separate thread, independent of the main browser UI thread. This feature is particularly useful for improving performance in web applications with heavy graphical computations, such as games or 3D visualizations. <h3>Key Features:</h3><ul><li>Allows rendering with WebGL, 2D, or other supported contexts off the main thread.</li><li>Improves responsiveness by offloading rendering tasks.</li><li>Compatible with Worker threads for parallel processing.</li></ul>OffscreenCanvas is ideal for applications that demand smooth, high-performance rendering while maintaining a responsive user interface.

offscreencanvas

OffscreenCanvas is a web API that enables rendering graphics in a separate threa.

Franky Arkon shares a detailed guide on creating realistic yet performant water wave effects in Three.js. The blog covers a step-by-step process to achieve visually stunning water surfaces optimized for real-time applications. <h3>Key Highlights:</h3><ul><li>Shader Techniques: Explanation of custom vertex and fragment shaders for simulating dynamic wave motion.</li><li>Performance Optimization: Strategies to balance visual quality with rendering speed, ensuring smooth performance.</li><li>Practical Examples: Clear code snippets and visuals to help developers integrate the effect into their projects.</li></ul>This tutorial is an excellent resource for anyone looking to add lifelike water simulations to their 3D applications while keeping performance in check.

Realistic and Fast Water Waves

Shader Techniques: Explanation of custom vertex and fragment shaders for simulating dynamic wave mot

The three-volumetric-clouds GitHub repository provides a solution for creating realistic and volumetric clouds in applications using the Three.js library. It is a library that provides dynamic, visually stunning cloud simulation, adding depth and realism to 3D scenes. FeaturesIt includes real-time rendering of clouds that can change dynamically according to scene settings. The clouds are highly customizable, allowing developers to adjust parameters like density, scale, and movement to fit their project needs. BenefitsThis library amplifies the 3D with the easy incorporation of clouds that would interact well with lighting for an immersive experience. It is perfect for gaming applications, simulations, and virtual landscapes. The repository is clear about how to use this and includes examples that could be followed by developers for seamlessly incorporating volumetric clouds into their projects.

Three volumetric clouds

The three-volumetric-clouds library enables realistic, dynamic cloud effects in Three.js projects, w

Starter repo for VITE + REACT + TS + GLSL in React Three Fiber

VITE + REACT + TS + GLSL- Starter

Starter repo for VITE + REACT + TS + GLSL

R3F Flow Field Particles Component

A particle system based on GPGPU, running with React Three Fiber

Shader Learning is an interactive platform designed to teach and enhance shading skills through problem-solving. It offers a variety of modules that cover essential topics in shader programming, including:<ul><li>Built-in Functions: Understanding fragment shaders and exploring GLSL functions.</li><li>Image Manipulation with Shaders: Techniques for manipulating 2D images using fragment shaders.</li><li>Vertex Transformations: Comprehensive insights into vertex shaders and their role in the graphics pipeline.</li><li>Lighting Basics: Fundamental lighting models for simulating realistic effects.</li><li>Shadow Mapping: Techniques for creating realistic shadows in real-time rendering.</li><li>Signed Distance Fields: Rendering smooth and detailed shapes using distance functions.</li><li>Noise: Various algorithms for creating visual effects.</li><li>Water: Techniques for visualizing realistic waves, reflections, and refractions.</li><li>Ray Tracing: Simulating the physical behavior of light to create highly realistic images.</li></ul>Each module consists of tasks that combine theoretical explanations with practical exercises, facilitating hands-on learning. Users have praised the platform for its balanced approach and effectiveness in improving shader programming skills. Shader Learning offers various subscription plans, including one-month, two-month, and three-month options, providing access to all tasks during the subscription period. The platform emphasizes accessibility and encourages donations to keep its resources available to learners worldwide.

Shader learning

Shader Learning is an interactive platform designed to teach and enhance shading skills through probl

TSL Textures is a collection of procedural textures created using Three.js Shading Language (TSL). These textures are generated in real-time on the GPU, allowing for dynamic and efficient rendering in 3D applications.

tsl textures

TSL Textures is a collection of procedural textures created using Three.js Shading Language (TSL).

Started as just a little playground for me. I wanted a place to collect various shader effects that I can actually use in real world client projects.All of the code of this website is public so you can see how I am doing this and copy it for your projects.I also made the shaders directly accessible for you to copy or expand on.

real world shader

a collection of shader effects that are actually useful in real world client projects

Shaders.app is a powerful, web-based GLSL shader editor that allows developers and designers to create, test, and visualize shaders in real time. Perfectly suited for use with three.js, this interactive tool simplifies the process of creating custom visual effects and animations for 3D projects. Shaders.app is a valuable resource for anyone working with three.js who wants to explore the creative potential of shaders without extensive coding.

Shaders.app

Shaders.app is an interactive GLSL shader editor for creating visual effects in three.js

What is LGL Tracer?LGL Tracer is a powerful real-time ray tracing editor that allows developers and designers to create advanced 3D shaders and scenes using ray tracing techniques, perfect for use in three.js projects. With its intuitive visual editor, LGL Tracer helps users generate custom shaders and lighting effects, offering a streamlined way to create complex, photorealistic visuals without the need for deep technical knowledge. This tool is a valuable resource for enhancing the realism and lighting in three.js projects.Key Features:<ul><li>Real-Time Ray Tracing: LGL Tracer enables real-time ray tracing, providing developers with the ability to simulate realistic light behavior, including reflections, refractions, and shadows, directly in their three.js scenes.</li><li>Shader Creation: Use the editor to create and customize complex shaders for materials, surfaces, and lighting effects, elevating the visual quality of your three.js projects.</li><li>Interactive Visual Editor: The intuitive node-based visual editor allows you to easily build and modify shaders without needing to write code, making it accessible for both beginners and experienced developers.</li><li>Seamless Integration with Three.js: Shaders and ray tracing effects created in LGL Tracer can be exported and integrated directly into three.js projects, ensuring smooth and efficient workflows.</li><li>Lighting and Material Optimization: Create realistic materials and control how light interacts with objects in 3D space, making it perfect for enhancing scenes with complex lighting setups.</li></ul>Why Use LGL Tracer?LGL Tracer is a highly useful resource for developers working with three.js who want to introduce advanced lighting, shading, and ray tracing effects into their projects. By simplifying the process of creating realistic materials and lighting effects, LGL Tracer enables developers to focus on the creative aspects of their projects while achieving visually stunning results in their three.js environments.

Lgltracer

LGL Tracer is a real-time ray tracing editor for creating shaders and scenes in three.js 

Jamir is an online sci-fi <a href="https://jamir.io" rel="noopener noreferrer" target="_blank">browser fps game</a> where you can play in multiple game modes. I have been developing Jamir since 2017 with Three.js and vanilla js.

JAMIR

Jamir is an online sci-fi browser FPS Game purely made with Three.js and vanilla js.

Elements Hive&nbsp;is a Breakdance Add-on that adds advanced Elements and Extensions, allowing you to build interactive website experiences you never thought were possible with a WordPress page builder.

Elements Hive

A collection of WebGL Elements and Extensions for creating Web Experiences in WordPress

Create 3D games and experiences for web, mobile, and VR using Hology Engine web technologies. Suitable for designers, web developers, artists, creators, educators, and game developers who wish to use front-end web technologies such as React and TypeScript, and no-code solutions for features such as VFX. Use case: Building web, mobile, PC games/applications, 3D/VR websites, personal portfolios online, and more. Efficiency: Hot reloading, fast asset import, automatic collision shapes, plus easy mobile and web distribution. Minimalistic: Our minimalistic UI is inspired to help designers, artists, and developers to a fast prototyping experience. Available to use on Windows, Linux, macOS, and we will build a version for iPads in the future.

Hology Engine

Create 3D games and experiences for web, mobile and VR by using web technologies with Hology Engine.

Awesome Generative Art is a repository specifically dedicated to creating, learning and dropping generative art, as well as providing links that help you engage with the community! Below you'll find curated lists of tutorials, frameworks, libraries, and platforms to get you started and to advance your skills.

Awesome Generative Art

Carefully curated list of awesome resources to create, learn and, drop generative art

<h4>ShaderToy – A Creative Resource for GLSL Shaders and Three.js Projects</h4> What is ShaderToy?ShaderToy is an online platform and community designed for creating, sharing, and exploring GLSL shaders. It is widely used by developers and artists to create real-time visual effects, animations, and 3D scenes using shaders. ShaderToy is an excellent resource for anyone working with three.js who wants to integrate complex shaders into their projects or explore how shaders can enhance 3D visuals. ShaderToy offers an interactive environment to experiment with shaders directly in the browser. Key Features:<ul><li>Create and Share Shaders: ShaderToy allows users to write GLSL shaders and see the results in real-time, while also sharing them with the community for feedback and collaboration.</li><li>Extensive Shader Library: The platform features a vast collection of shaders created by the community, covering a wide range of visual effects, lighting techniques, post-processing, and more — all of which can be useful resources for three.js projects.</li><li>Real-Time Rendering: View and interact with shaders in real-time, adjusting parameters and immediately seeing the impact of changes, making it a great tool for shader experimentation.</li><li>Web-Based Platform: ShaderToy runs entirely in the browser, meaning there’s no need for installation. Users can experiment with shaders, modify them, and see their visual effects live without leaving their browser.</li><li>Integration with Three.js: Many shaders developed on ShaderToy can be adapted for use in three.js, allowing developers to enhance their 3D web projects with custom visual effects and creative animations.</li></ul> Why Use ShaderToy?ShaderToy is an invaluable resource for developers and designers working with three.js who want to incorporate advanced GLSL shaders into their projects. Whether you're looking for inspiration, learning shader programming, or adapting shaders for use in your 3D scenes, ShaderToy provides a platform for exploration and creativity.

Shadertoy

ShaderToy is an online community and platform for creating, sharing, and exploring GLSL shaders.

<h4>NodeToy – Visual Shader Editor for Three.js</h4> What is NodeToy?﻿NodeToy is an intuitive, node-based visual shader editor that allows developers and designers to create complex shaders without writing any code. It’s an ideal resource for those working with three.js, as it simplifies the process of creating custom shaders by providing a visual interface. NodeToy helps users craft shaders for materials, lighting, and special effects that can be easily integrated into three.js projects.Key Features:<ul><li>Node-Based Interface: Create complex shaders through a visual, drag-and-drop interface without needing to write code. The node system allows users to see and control every aspect of the shader creation process.</li><li>Real-Time Preview: Instantly see the results of your shader changes in real-time, ensuring faster iteration and fine-tuning for your three.js scenes.</li><li>Shader Export: Easily export your shaders in GLSL format for integration into three.js projects, enabling you to enhance 3D visuals with custom effects.</li><li>Customizable Materials: Create unique materials with precise control over properties like reflections, refractions, lighting, and surface details.</li><li>Seamless Integration with Three.js: Designed with three.js in mind, NodeToy allows you to use your custom shaders in your 3D scenes, providing an efficient and flexible way to add visual flair to your projects.</li></ul> Why Use NodeToy?NodeToy is a valuable resource for both beginners and experienced developers working with three.js. By providing a visual, node-based approach to shader creation, it eliminates the complexity of shader programming while still offering powerful customization options. Whether you're looking to create realistic materials or dynamic effects, NodeToy streamlines the shader development process for your three.js resources.

Nodetoy

NodeToy is a visual shader editor for creating custom shaders, ideal for three.js resources.

<h4>The Book of Shaders – Interactive GLSL Shader Learning for Three.js</h4> What is The Book of Shaders? The Book of Shaders is an interactive, step-by-step guide designed to teach developers the fundamentals of GLSL shader programming. It provides a clear and accessible way to learn about shaders, focusing on practical techniques that can be applied in three.js projects. The Book of Shaders is a perfect resource for developers who want to dive into creating custom visual effects for 3D applications, games, or web projects using three.js.Key Features:<ul><li>Interactive Learning: The guide offers live coding examples and hands-on exercises, allowing users to experiment with shader code directly in the browser.</li><li>Comprehensive Shader Fundamentals: Learn the essentials of GLSL, covering topics like colors, patterns, lighting, and animation techniques.</li><li>Practical Application in Three.js: The skills learned from this guide can be applied to three.js projects, making it a valuable resource for adding custom shaders to 3D scenes.</li><li>Beginner-Friendly: The Book of Shaders is designed to be accessible to beginners, yet deep enough for experienced developers looking to sharpen their shader programming skills.</li><li>Creative Freedom: Explore how to create unique visual effects, from simple color transitions to complex patterns, all of which can enhance the realism and interactivity of your 3D environments.</li></ul> Why Use The Book of Shaders?This interactive guide is an essential resource for anyone looking to master GLSL shaders and use them in three.js projects. Whether you’re a beginner wanting to get started with shaders or an experienced developer seeking to create more advanced visual effects, The Book of Shaders provides the knowledge and practical tools needed to elevate your 3D work.

thebookofshaders

The Book of Shaders is an interactive guide to mastering GLSL shaders, ideal for three.js resources.

<h4>LSL Shaders from Scratch – Master Shader Programming for Three.js Resources</h4> What is GLSL Shaders from Scratch?GLSL Shaders from Scratch is a comprehensive course designed by SimonDev to teach developers how to create custom GLSL shaders from the ground up. Shaders are essential for controlling the appearance of 3D objects and effects in real-time 3D rendering, and this course is a perfect resource for those looking to enhance their three.js projects with custom visual effects. The course breaks down complex shader concepts, making them accessible even to beginners. Key Features:<ul><li>Complete Shader Programming Guide: Learn the fundamentals of GLSL (OpenGL Shading Language), including vertex and fragment shaders, and apply them to three.js.</li><li>Hands-On Projects: The course provides practical examples and projects that focus on creating real-time visual effects like lighting, shadows, and reflections.</li><li>From Basics to Advanced: Whether you're a beginner or have some experience with shaders, this course will help you understand and master shader programming step-by-step.</li><li>Three.js Integration: Specifically designed for developers working with three.js, this course shows how to integrate custom shaders into your 3D scenes.</li><li>Lifetime Access: Once enrolled, you receive lifetime access to the course materials, updates, and the ability to revisit the content anytime.</li></ul> Why Choose GLSL Shaders from Scratch?If you’re looking to add unique and creative visual effects to your three.js resources, this course is the perfect way to deepen your understanding of GLSL shaders. From creating dynamic lighting effects to custom water shaders, the course gives you all the tools needed to enhance your three.js projects with custom shaders.

Glsl Shaders from scratch

GLSL Shaders from Scratch teaches you to create custom shaders, enhancing three.js resources.

<h4>WaterSurface Components – Realistic Water Reflection and Interactive FX for Three.js Resources</h4>What is WaterSurface? WaterSurface is a React Three Fiber component designed to simulate realistic water surfaces with advanced reflections and distortion effects. These components are part of a three.js resource, helping developers create visually immersive environments within their three.js projects. The components include different water surface variations and additional interactive effects, which can enhance your 3D scenes by simulating water surfaces with realistic reflections, ripples, and fluid dynamics.

R3F-WaterSurface

WaterSurface Components offer realistic water reflections and interactive effects for three.js

Three js Shaders