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

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

VITE + REACT + TS + GLSL- Starter

Starter repo for VITE + REACT + TS + GLSL

<h3>Company Overview</h3>Peach Worlds is the first no-code builder for 3D websites, empowering designers to effortlessly create immersive, interactive experiences in a fraction of the time. By combining familiar 3D, Motion, and UI tools into one powerful toolset, Peach Worlds acts as a website within a drag-and-drop 3D canvas. We are the future of 3D web design and we are setting a new standard for online presence,<h3> </h3><h3>Technological Overview</h3>Peach Worlds combines cutting-edge 3D technology with an intuitive, no-code website builder, allowing designers to seamlessly integrate 3D elements, motion graphics, and UI components into fully immersive websites. Here’s how Peach Worlds makes it happen: Drag-and-Drop 3D Canvas:<ul><li>A visual workspace where designers can import and manipulate 3D models, set lighting, adjust environments, and apply post-processing effects—no coding required.</li></ul>Keyframe Animation Tools:<ul><li>Easily animate elements and trigger interactions with keyframe-based animations to enhance storytelling and engage users.</li></ul>Integrated UI Editor:<ul><li>Create responsive, visually appealing layouts by blending traditional 2D web design with 3D elements, ensuring seamless scrolling and smooth transitions.</li></ul>Optimized Performance Engine:<ul><li>Peach Worlds uses a custom-built engine and compression tools to optimize 3D models and graphics, ensuring fast load times and smooth performance across devices.</li></ul>Global Hosting with AWS &amp; CDN:<ul><li>Hosted on AWS infrastructure with CloudFront CDN, ensuring low-latency experiences and fast delivery anywhere in the world.</li></ul>With Peach Worlds, designers can focus on their creativity while the platform takes care of the technical complexities—allowing them to build next-level 3D web experiences that perform beautifully.

Peach Worlds

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

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.

InstancedMesh2&nbsp;is an alternative version of&nbsp;InstancedMesh&nbsp;that offers advantages:<ul><li>frustum culling for each instance</li><li>sorting</li><li>visibility for each instance</li><li>each instance can have an object similar to&nbsp;Object3D&nbsp;to simplify its use</li><li>spatial indexing&nbsp;<a href="https://en.wikipedia.org/wiki/Bounding_volume_hierarchy" rel="noopener noreferrer" target="_blank">(BVH)</a>&nbsp;for fast raycasting and frustum culling</li><li>LOD (work in progress)</li></ul> This library has two dependencies:<ul><li>three.js r159+</li><li><a href="https://github.com/agargaro/BVH.js" rel="noopener noreferrer" target="_blank">bvh.js</a></li></ul>

three.ez/instanced-mesh

Enhanced InstancedMesh with frustum culling and more.

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.