用深度图和 Three.js 为图片重新打光
用深度图配合 Three.js TSL 和 WebGPU，把静态 2D 图片渲染成带真实光照、表面细节和自阴影的动态效果。 Codrops 这篇教程演示了从深度图提取法线信息、用 TSL 编写着色器、再通过 WebGPU 后端渲染的完整流程。适合正在做 WebGL 交互效果或想探索 Three.js 新渲染能力的开发者参考。
提交点赞
评论
点赞
收藏用 GSAP 时间轴和动态 CMS 数据构建动画用户评价展示组件
用 GSAP 时间轴在 Webflow 中构建动态用户评价展示组件，结合 CMS 数据和自定义 JS 计数器实现动画效果。
企业级规模下的创意：OFF+BRAND 项目故事
Codrops 介绍 OFF+BRAND 项目，从 Awwwards 年度网站到微软官网等大规模创意展示案例。
HAOQI.DESIGN 技术解析：DOM 与 WebGL 共舞的复古未来主义作品集
Codrops 发布 作品集的技术实现解析，涵盖滚动同步、玻璃着色器以及 DOM/CSS/WebGL 的协作方案。
从动效到意义：Denis Avramenko 的交互设计方法
Codrops 发布设计师 Denis Avramenko 的创作过程回顾，聚焦他在动效、排版、交互和技术方面的设计方法，通过多个数字项目展示其从动态到意义的设计思路。
用 Three.js、TSL 和 Three Start 创建交互式 3D 集群
用 Three.js TSL 和 WebGPU 将二十面体变为可交互 3D 集群，含噪声动画、交互响应与后期处理。
用 Three.js 和 WebGPU 探索程序化几何体
Codrops 发布 Three.js Geometry Painter 教程，用 WebGPU 和 TSL 实现程序化几何体的实时绘制与交互控制，涵盖表面拾取、自定义着色器、光照和后期处理。
从品牌系统到文化世界：深入Antinomy与27b工作室
Codrops介绍两家关联设计工作室Antinomy和27b，探讨它们如何在品牌策略、设计和体验层面保持清晰的审美与文化敏感度。
为 Chems Studio 创意实践设计灵活数字档案
Chems Studio 推出一个以电影为主的网站，将多年创意指导和动态影像整合到一个灵活、克制的数字框架中。
The Department Is Open: Building the PX PUSH Website
How a design subscription studio built its website around a single governing idea: an old, always-on machine, running underneath a modern Nuxt and Three.js stack.
Garden Anomaly: A Tiny WebGPU and TSL Experiment
A tiny WebGPU and TSL experiment, tinkering with physics, deformations, and procedural audio, all tied together inside a sphere to play with.
A Canvas for Individuality: Creating Websites That Feel Unmistakably Human with Readymag
A selection of websites that show why individuality, not trends, creates the most memorable experiences on the web.
Building an Endless Interactive Glass Xylophone with Three.js
A scrolling helix of frosted glass bars that ring as you sweep across them, built in Three.js with instancing, a fluid simulation, and glass faked entirely in the shader.
The Story Is in the Interaction: Bonhomme’s Digital Experiences for Luxury Brands
Bonhomme explores how brands come alive through digital, turning design and technology into immersive stories.
Building an Infinite GSAP Scroll Gallery with Parallax and Flip Transitions
Learn how to build an infinite GSAP gallery with parallax scrolling, reveal animations, and Flip-powered fullscreen transitions.
Studio Freight：以使命驱动的设计与策略
Codrops 介绍 Studio Freight 以使命驱动的方法论，涵盖策略、设计和数字体验，展示他们与团队共同推进项目的实践。 
Between Print and Digital: The Making of MERSI’s Website
FLOT NOIR reimagines MERSI’s digital presence as a quiet, immersive space between architectural print and interactive web, combining a tailored Webflow build with precise motion and editorial storytel...
The Art of Continuous Transformation: How Garden Eight Blends Integrity with Play
Inside Garden Eight's approach to creating websites that are not only visually striking, but thoughtfully crafted to evolve, engage, and endure.
Building Cerebrium: Making Serverless Infrastructure Tangible
Go behind the scenes of Cerebrium to explore the design, 3D, and WebGL techniques that turned complex AI infrastructure into an intuitive interactive experience.