#demo #codepen #WebGL #Shader
写着色器的真的很 NB，每次看到都很佩服。
Juicy：Matthias Hurrle 的又一次关于次表面散射（subsurface scattering）的实验，模拟水果糖果风格的魔方。

#优质博文 #WebGL #CSS #前端 #动画 #course
How to Animate WebGL Shaders with GSAP: Ripples, Reveals, and Dynamic Blur Effects

AI 摘要：本文通过实例展示如何将 GSAP 动画库与 WebGL 着色器（Shaders）结合，以构建沉浸式网页交互视觉。作者从基础的 HTML 布局与 Three.js 场景搭建开始，逐步扩展至通过 GSAP 动画驱动着色器 uniform 参数，实现包括灰阶渐变、点击波纹、鼠标揭示遮罩、点击与按压的流体扭曲、以及基于滚动的动态模糊等复杂 GPU 动效。文章强调 JavaScript 动画时间线与 GLSL 实时渲染逻辑的联动，让网站视觉能以自然、物理感与交互性呈现。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 基础设置与 HTML/CSS 结构
• 构建页面容器与隐藏溢出内容，准备 GSAP Draggable 和 ScrollTrigger 绑定。
• 在 Three.js 环境中创建 Stage 类，负责 Renderer、Camera、Scene 管理。
• 使用 GSAP ticker 同步渲染循环，实现动画与渲染一致更新。

2. WebGL Stage 与平面载入
• 使用 TextureLoader 创建平面 (PlaneGeometry)，加载 DOM 中的图片纹理。
• 将 DOM 元素与 Canvas 中的物体同步，通过正交相机的坐标转换函数转换屏幕坐标到世界坐标。
• 替换标准材质为 ShaderMaterial，导入自定义 vertex/fragment shader。

3. 点击波纹与灰阶渐变效果（Ripple + Grayscale）
• 使用 GSAP Observer 监听点击事件。
• 点击后修改 shader uniform uGrayscaleProgress 在彩色与灰阶之间平滑过渡。
• 添加鼠标点击点 uMouse uniform，使过渡从点击中心扩散。
• 加入顶点波动（Ripple）动画，在 vertex shader 中用正弦函数生成波形变形。
• 结合 GSAP Timeline 同步控制灰度和波纹周期。
• 管理多平面状态，实现点击切换与反向第二动画效果。

4. 纹理遮罩揭示（Texture Reveal Mask Effect）
• 引入双纹理 (uTexture, uTextureBack) 并使用 uMixFactor 控制混合。
• 通过鼠标 hover 事件，使用 Raycaster 定位交互对象。
• 在 fragment shader 中基于鼠标坐标生成圆形遮罩，平滑混合两张纹理。
• 悬停时 reveal 动画开启，离开时渐出还原。

5. 点击按压揭示（Click & Hold Mask Reveal）
• 通过 GSAP Observer 监听 onPress/onRelease/onMove，管理按压持续状态。
• 使用异步 Timeline 表现“按住充能—释放复位”的动画逻辑。
• shader 中使用噪声函数 (noise) 与 uTime 动态扰动 mask，制造液态波动感。
• 实现交互中的纹理扭曲、流动与时间关联视觉。

6. 动态模糊轮播（Dynamic Blur Effect Carousel）
• 结合 GSAP Draggable 与 ScrollTrigger 使轮播支持拖动与滚动同步。
• 计算每个平面到屏幕中心的距离，根据距离动态更新 uBlurAmount。
• 在 shader 中使用多重 Kawase 模糊算法，混合多层模糊采样和平滑区间。
• blur 与 scroll 动态联动，创造景深般的焦点模糊效果。

7. 总结与启发
• GSAP 为动画时序与交互逻辑提供流畅控制。
• Shaders 提供像素级视觉自由度与 GPU 实时渲染性能。
• 在 Web 前端中实现生动视觉，展现设计与技术融合的趋势。

author Andrea Biason

Codrops

How to Animate WebGL Shaders with GSAP: Ripples, Reveals, and Dynamic Blur Effects | Codrops

A hands-on guide to animating WebGL shaders with GSAP, exploring how to control shader uniforms and sync JavaScript timelines.

#前端 #demo #codepen #webgl #着色器
一组抛光的着色器
Orbs N Ringz by Matthias Hurrle
是建立在 tw_orbsNringz 上的着色器实现

Orbs N Ringz
Matthias Hurrle carves out a set of polished shapes in this "Fun little shader doodle, heavily influenced by KomaTebe's tw_OrbsNRingz. I just wanted to recreate it with only a fragment shader so I could play around with it."

via CodeSparkle#467

#NewsLetter #React #JavaScript #前端 #新动态
⚛️ React Status #437

AI 摘要：本期《React Status》全面概述了 React 生态系统的最新进展，包括全新 UI 组件库的发布、React Compiler 文档的改进、避免常见 React 和 Next.js 开发错误的实用指南，以及 AI 辅助 UI 构建的效率对比。此外，还深入探讨了 Zustand 状态管理、React Router 与 Server Components 的未来集成，以及 React 图形可视化的应用。文章还收录了一系列新增及更新的代码工具和库，并简要介绍了 JavaScript 领域的其他重要动态，如 Bun 的新版本发布和新的全栈框架尝试。

1. 社区动态与文章
• React Compiler 新版文档 – React 团队正努力改进 React Compiler（一个处于发布候选阶段的预编译优化工具）的官方文档，以便开发者深入学习和使用。
• Untitled UI React: 全新 UI 组件库 – 介绍了一个基于 Tailwind CSS 和 React Aria 构建的开源 UI 组件库，支持复制粘贴式开发，并提供 PRO 版本包含更多组件和 Figma 集成。 #组件库 #tailwind
• Figma MCP vs Claude: UI 构建之战 – 探讨了将 Figma 中的 UI 视图转换为可运行 React 代码的最佳方法，对比了使用 Figma 自身的 MCP 服务器和 Claude Code 通过截图实现的效果。 #AI #MCP
• Zustand 状态管理入门 – 为对 Zustan 感兴趣的开发者提供了全面介绍，强调这个轻量级状态管理解决方案的成熟、流行和经过实战检验的特性。
• React Router 与 React Server Components 的未来 – 探讨了 React Router 用户在与 React Server Components 集成时将面临的重大影响和未来发展方向。
• 使用 Matter.js 和 React Native Skia 构建 2D 游戏风格物理效果 – (文章) 详细讲解如何实现 2D 游戏中的物理效果。
• 将 Next.js 站点迁移至 Eleventy 并提升 24% 性能 – (文章) 分享了从 Next.js 迁移到 Eleventy（一个流行的 Node.js 静态站点生成器）的经验，并展示了性能提升。
• 使用 Okta 创建带有社交登录认证的 React PWA – (文章) 指导如何构建一个支持社交登录认证的 React 渐进式 Web 应用 (PWA)。

2. 代码与工具 (Code, Tools & Libraries)
• Reagraph: WebGL 驱动的 React 网络图可视化库 – 提供详细文档和 Storybook 实例，用于在 React 中实现基于 WebGL 的网络图可视化。 #webgl
• React Unity WebGL 10.0: 在 React 应用中嵌入 Unity WebGL 应用 – 庆祝其发布 8 周年，帮助将 Unity WebGL 应用与 React 应用集成并进行通信。
• React CodeMirror: CodeMirror 编辑器组件 – 使在 React 中使用流行的 JavaScript 代码编辑器 CodeMirror 变得更简单，提供了可定制的演示。
• React Native Audio API 0.6.5 – 基于 Web Audio API 的音频引擎。
• React Stripe.js 3.8 – Stripe.js 和 Stripe Elements 的 React 组件。
• React Native Rich Text Editor 1.10 – React Native 富文本编辑器。

3. JavaScript 领域其他动态 (Elsewhere in JavaScript)
• Platformatic 在 Node.js 中运行 Laravel 应用 – Platformatic 公布了在 Node.js 环境下运行 Laravel 应用的新方法。
• Bun v1.2.19 发布 – Bun 发布了新版本，新增了 pnpm 风格的隔离 node_modules 选项、交互式包更新器、VS Code 测试浏览器集成、更快的 Postgres 客户端等。
• eslint-config-prettier 包安全事件分析 – 分析了 eslint-config-prettier 包最近被入侵的事件，包括其工作原理和发生过程。
• bhvr: 基于 React 的全栈技术栈 – 介绍了一个构建全栈应用的有趣新尝试，该技术栈由 Bun, Hono, Vite 和 React (bhvr) 组成。

react.dev

React Compiler – React

The library for web and native user interfaces

#优质博文 #前端 #WebGL #three #demo
看了这篇突然意识到我写的那篇好烂ww完全不是面向基础的教程欸～感觉这种一步步来的真不好写。
Interactive Text Destruction with Three.js, WebGPU, and TSL | Demo

AI 摘要：本文是一篇关于使用 Three.js、WebGPU 和 Three Shader Language (TSL) 实现互动文字破坏效果的详细教程。作者通过一步步的代码示例和讲解，展示了如何在 Web 上创建动态的 3D 文字效果，利用指针位置和弹簧物理原理实现文字的变形与破坏动画，同时结合后处理技术增强视觉效果。文章不仅提供了技术实现细节，还分享了作者对 Web 互动体验发展的感悟，强调了 Three.js 等工具如何让 Web 重新焕发创意活力。

1. 文字几何体 (TextGeometry)：
• 内容：使用 TextGeometry 创建 3D 文字，配置字体、大小、深度、斜角等参数，并应用 MeshStandardMaterial 材质。通过计算 BoundingBox 将文字居中对齐。
• 总结：实现了 3D 文字的创建与居中，为后续的互动效果做好准备。

2. Three Shader Language (TSL)：
• 内容：详细介绍了使用 TSL 实现文字破坏效果的核心逻辑。包括存储顶点原始位置和法线、创建模拟数据的存储缓冲区、在 GPU 上运行初始化和更新计算函数、使用 uniforms 传递指针位置等数据、通过弹簧物理和摩擦力实现动态变形效果、添加噪声和旋转以增强动画的混乱感。
• 总结：通过 TSL 实现了基于指针位置的顶点变形和动态动画效果，展示了 GPU 计算在互动设计中的应用。

3. 材质与后处理：
• 内容：调整材质的发光颜色 (emissive color)，通过速度缓冲区偏移色调以产生多样化效果，并添加雾效和背景颜色。引入后处理技术，包括环境光遮蔽 (AO)、泛光 (bloom) 和噪声效果，提升画面质感。
• 总结：通过材质调整和后处理技术，增强了视觉表现力，使破坏效果更具冲击力。

author Lolo Armdz

0:05

Media is too big

VIEW IN TELEGRAM

#博客更新 #前端 #WebGL #p5
从像素到粒子：p5.js 图像转动态粒子的设计与实现
疯狂叠甲，不行了，就先这样吧，这篇博文和项目搭建写的都比较匆忙，有很多写的比较烂的地方，毕竟是为需求服务的，重构本身就比较赶，后续应该会不断完善。
部分段落有使用 AI 进行润色和辅助，虽然很 AI 但是通俗易懂就留着了（要困死了先睡觉）

#Newsletter #前端 #JavaScript #CSS #新动态 #AI
🚀 Frontend Focus #701

AI 摘要： 本期《Frontend Focus》（第 701 期，2025 年 7 月 16 日）涵盖了前端开发的多个热点话题，包括在严格约束下创新的项目案例、Apple 在浏览器引擎选择上的争议、WebAssembly 的广泛应用、CSS 新特性和工具的使用，以及一系列实用的前端工具和资源。文章还提到 Mozilla 即将为 Firefox 添加 WebGPU 支持，并探讨了 AI 对开源开发者生产力的影响，旨在为前端开发者提供最新的技术动态和实用技巧。

1. “I’m More Proud of These 128 Kilobytes Than Anything I’ve Built Since”：通过一个项目案例，Mike Hall 展示了在带宽和处理能力等严格约束下的创新设计，提醒开发者考虑更广泛的用户需求，设计更具包容性的产品。 #性能优化
2. “Apple’s Browser Engine Ban Persists, Even Under the DMA”：Open Web Advocacy 指出 Apple 在 iOS 浏览器引擎选择上未能有效遵守欧盟《数字市场法案》（DMA），存在阻碍竞争的问题。
3. “WebAssembly: Yes, But for What?”：Andy Wingo 在 ACM Queue 上分享了 WebAssembly 在浏览器和服务器端的广泛应用，探讨其如何逐渐渗透到各个领域。 #WASM
4. 简讯（IN BRIEF）：
• Mozilla 将在 Firefox 141 中添加 WebGPU 支持（初期仅限 Windows，后续扩展至 macOS 和 Linux）。
• 一份报告分析了 AI 对开源开发者生产力的影响。
• Firefox 团队寻求用户对 Mozilla 浏览器的真实反馈。
• Andy Bell 分享了一个 CSS 代码片段，为锚定 URL 添加必要的空间，提升用户体验。
5. 文章、观点与教程（Articles, Opinions & Tutorials）：
• CSS 行长度设置 - Daniel Schwarz 介绍如何利用 clamp() 和 calc() 等工具更轻松地设置文本行长度，并展望未来发展。
• 纯 HTML 和 CSS 编写 - Joel Dare 分享为何在 2025 年仍坚持使用纯 HTML 和 CSS。
• ARIA 角色与属性使用 - Michael Beck 讲解如何有效使用 ARIA 角色和属性。 #WCAG
• 滚动行为设计 - Megan Chan 探讨何时应保存用户的滚动位置。
• AI 与网页设计 - Noah Davis 认为模板而非 AI 才是网页设计的真正“杀手”。
6. 工具、代码与资源（Tools, Code & Resources）：
• SveltePlot - Gregor Aisch 开发的 Svelte 可视化框架，基于 D3，支持多种图表类型。
• Eleventy LibDoc - IT Automotive Design System 提供的一个 Eleventy 起步项目，用于创建美观直观的文档站点。
• SplitThing - Florian Reintgen 开发的工具，可将图像分割为自定义网格并下载。
• Chili3D - xiange chen 开发的基于 Web 的 3D CAD 应用，利用 WebAssembly 和 Three.js 实现接近原生性能。 #webgl
• designtokens.fyi - Design Systems House 提供的设计令牌术语词汇表，包含 33 个相关术语解释。
• Check Server-Side Rendering (SSR) - Punit Sethi 开发的工具，帮助检查网页元素的服务器端渲染情况。
• FontGen - 智能字体配对工具，包含 1000+ 字体（需注册）。
• Pandabox - StJohn 开发的 Astro 轻量级灯箱和画廊组件。

Medium

I’m more proud of these 128 kilobytes than anything I’ve built since

I’m more proud of these 128 kilobytes than anything I’ve built since I once worked with a UI designer who insisted it was impossible to create a product that was both within the Web Content …

#前端 #趣站 #tools #webgl #three #demo #动画

洗衣机酱是一个 3D 洗衣店，在这里图像会被清洗。一个使用 Three.js 构建的本地、无广告的背景移除器——快速、私密、有趣。

好可爱好有创意！
https://tools.dverso.io/bgremove/

0:21

Media is too big

VIEW IN TELEGRAM

#优质博文 #webgl #r3f #性能优化 #react
Three.js Instances: Rendering Multiple Objects Simultaneously

AI 摘要：本文详细介绍了在 Three.js 中使用实例化（Instancing）技术来优化性能，同时渲染多个对象。通过实例化，可以将多个共享相同几何形状和材质的对象合并为一个绘制调用（Draw Call），显著减少 CPU 到 GPU 的通信开销，从而提升渲染效率。文章结合 React Three Fiber 和 drei 库，提供了从基础实例化到复杂场景（如森林渲染）的完整教程，涵盖了自定义着色器、实例属性调整以及多种实例集的实现方法。

1. 引言：介绍了实例化的基本概念及其性能优势。实例化允许在一次绘制调用中渲染多个共享几何形状和材质的对象，例如渲染森林中的树木、岩石和草地时，可以大幅减少绘制调用次数，提升性能。
2. 基础实例化：以渲染一千个盒子为例，展示了传统方法与使用 drei/instances 的实例化方法的对比。传统方法需要一千次绘制调用，而实例化方法仅需一次，显著优化了性能。
3. 多组实例化：讨论了如何使用 drei 的 createInstances() 函数创建多个实例集，例如同时渲染盒子和球体（一千个盒子与一千个球体），最终仅需两次绘制调用。
4. 自定义着色器的实例化：讲解了如何为实例化对象创建自定义着色器材料，包括顶点动画（如 blob 效果）。通过 instanceMatrix 属性解决位置重叠问题，确保每个实例有独立的变换。
5. 调整实例属性：介绍了如何通过 InstancedAttribute 为每个实例设置自定义属性，例如为 blob 动画添加时间偏移（timeShift），实现独立动画效果。
6. 创建森林场景：以渲染一千棵树为例，展示了如何加载 3D 模型并应用实例化技术，最终仅用三次绘制调用完成整个森林场景（包括天空盒和地面）。还通过随机位置、高度和旋转增加场景多样性。
7. 进一步阅读：提及了未深入探讨但值得关注的主题，如批量网格（Batched Meshes）、骨骼动画（Skeletons）以及变形（Morphing）与批量网格的结合。

author Matias Gonzalez Fernandez

Codrops

Three.js Instances: Rendering Multiple Objects Simultaneously | Codrops

Learn how to render thousands of 3D objects efficiently using instancing in React Three Fiber, as demonstrated in the performance-optimized basement.studio site.

#优质博文 #chrome #webgl #性能优化 #浏览器 #新动态
Introducing Skia Graphite: Chrome's Rasterization Backend for the Future

AI 摘要：本文详细介绍了 Chrome 在 Apple Silicon Macs 上推出的 Skia 新光栅化后端 Graphite。Graphite 是一个面向未来的图形渲染技术，显著提升了 Chrome 在 Motionmark 1.3 测试中的表现，同时为未来的图形改进奠定了基础。通过支持现代图形 API（如 Metal、Vulkan 和 D3D12）、多线程设计以及深度测试等创新技术，Graphite 不仅提高了渲染性能，还优化了用户体验，减少了滚动卡顿和页面加载等待时间。

1. Skia 在 Chrome 中的历史：
• 介绍了 Skia 作为 Chrome 图形渲染核心的历史，从最初的性能问题到引入 GPU 加速后端 Ganesh。
• Ganesh 虽性能优异，但因其以 OpenGL 为中心的设计，难以充分利用现代图形 API 的优势，因此团队开发了 Graphite。

2. Graphite 的成果：
• 在 Macbook Pro M3 上，Motionmark 1.3 得分提升近 15%。
• 优化了真实世界指标，如交互到下一帧时间（INP）、最大内容绘制时间（LCP）、图形流畅度（掉帧百分比）以及 GPU 内存使用等。

3. Graphite 与 Ganesh 的区别：
• 现代图形 API：Graphite 利用 Chrome 的 WebGPU 实现 Dawn，支持 Metal、Vulkan 等现代 API，减少维护负担并提升多线程和 GPU 计算能力。
• 2D 深度测试：通过深度测试减少过度绘制（overdraw），优化不透明和半透明对象的渲染顺序，提升性能并降低移动设备功耗。
• 多线程设计：Graphite 的 API 支持多线程，利用独立记录器（Recorders）在多线程上生成记录（Recordings），减轻主线程负担，减少卡顿和延迟。
• 性能悬崖与管线编译：Graphite 减少渲染管线数量，避免因管线编译导致的卡顿，确保复杂内容与简单内容渲染效率一致。

4. 未来计划：
• 多线程光栅化：计划将光栅化任务分配到多线程，进一步提升性能。
• 减少简单内容的 GPU 内存：通过重新发布记录（Recordings）优化滚动，减少不必要的 GPU 内存分配。
• GPU 计算路径光栅化：探索 GPU 计算路径光栅化技术，提升视觉质量和性能，替代传统的 MSAA 和 CPU 光栅化。

author Claire Charron

Chromium Blog

Introducing Skia Graphite: Chrome's rasterization backend for the future

Today's The Fast and the Curious post covers the launch of Skia's new rasterization backend, Graphite, in Chrome on Apple Silicon Macs. Gr...

#demo #前端 #webgl #r3f
Animations with React-Three-Fiber
Demo | GitHub

Bring static visuals to life with rotating textures, 3D geometry, and smooth motion powered by React Three Fiber.
使用旋转纹理、3D 几何图形和由 React Three Fiber 驱动的平滑运动，将静态视觉效果赋予生命力。

0:13

Media is too big

VIEW IN TELEGRAM

#优质博文 #前端 #webgl #gsap #动画 #three #shader #demo #course
科幻风格的 3D 音频可视化器，这个真的很酷！
Coding a 3D Audio Visualizer with Three.js, GSAP & Web Audio API

AI 摘要：本文详细介绍了如何使用 Three.js、GSAP 和 Web Audio API 构建一个科幻风格的 3D 音频可视化器，灵感来源于 Webflow & GSAP 社区挑战赛。作者通过创建一个响应音乐的“异常探测器”界面，将声音与视觉效果实时结合，打造了一个充满未来感的沉浸式体验。文章从 Three.js 场景搭建、音频分析、自定义着色器，到 GSAP 动画和交互设计，逐步讲解了实现过程，展示了创意编码如何将技术与艺术融合。

1. 项目背景与灵感
• 源于 Webflow & GSAP 社区挑战赛（主题为“Draggable & Inertia”），作者决定创建一个音乐响应的 3D 可视化器。
• 设计灵感是一个在黑暗虚空中发光的橙白渐变球体，通过 Midjourney 生成视觉原型，并结合 Photoshop 调整作为视觉基础。
• 目标是打造一个科幻“异常探测器”界面，通过音乐驱动视觉效果，融合声音与画面。

2. Three.js 场景搭建
• 使用 Three.js 创建 3D 场景，包括场景、透视相机和渲染器，设置相机位置以获得最佳视角。
• 添加 OrbitControls 实现点击拖拽旋转视角，并设置阻尼效果以提升流畅性。
• 核心对象“异常球体”由两部分组成：外部线框球体（基于 IcosahedronGeometry，使用自定义 ShaderMaterial 实现发光线框效果，随音乐变形）和内部发光球体（基于 SphereGeometry，半透明发光效果形成光晕）。
• 增加背景粒子效果和网格覆盖，结合 Midjourney 生成的背景图像，营造全息显示的科幻氛围。

3. Web Audio API 音频分析
• 使用 Web Audio API 分析音频，支持用户上传音频文件或选择预设曲目。
• 通过 AudioContext 和 AnalyserNode 实时获取音频频率数据（fftSize=2048，平滑常数为 0.8），计算音频强度（audioLevel）用于驱动视觉变化。
• 动画循环中持续更新频率数据，提取平均音量和峰值频率，显示在 UI 上作为“异常指标”。
• 将音频强度值传入着色器和动画，同步音效与视觉效果（如球体亮度、变形程度随音乐强度变化）。

4. 音频响应着色器开发
• 使用 Three.js 的 ShaderMaterial 编写自定义 GLSL 着色器，控制球体的动态外观。
• 顶点着色器：通过 Simplex 噪声函数实现顶点变形，随时间和音频强度变化，音乐强烈时球体更尖锐、混乱。
• 片段着色器：应用 Fresnel 效果增强边缘发光，随音频强度脉动，同时加入微弱的独立呼吸动画（sin 函数）。
• 内部发光球体使用 BackSide 渲染和加色混合，营造柔和光晕效果，增强能量场视觉感。

5. GSAP 动画与交互设计
• 使用 GSAP 实现流畅动画，如音频播放时的相机缩放（靠近球体）和暂停时的恢复，增强戏剧效果。
• 借助 GSAP 的 Draggable 和 InertiaPlugin 插件，制作可拖动的 UI 面板，支持动量效果，用户可“抛掷”面板，增加交互趣味性。
• 实验性地实现 3D 球体拖拽，通过自定义逻辑和惯性衰减模拟物理效果，用户可旋转和抛掷球体。
• GSAP 时间线用于编排多个动画序列（如文本淡出），确保交互和过渡自然流畅。

6. UI 设计与氛围营造
• 设计灵感来源于科幻控制面板，UI 使用简约风格（半透明深色面板、浅色文字），包括控制球体旋转速度、分辨率、变形程度和音频灵敏度的滑块。
• 增加音频频谱分析面板（基于 canvas 绘制频率条形图）和终端日志窗口，模拟高科技系统运行状态。
• 通过 CSS 实现屏幕网格覆盖，添加漂浮粒子效果，结合自制背景音乐，强化沉浸式科幻体验。

7. 总结与成果
• 最终作品是一个互动艺术品，用户加载音乐后，系统“启动”并同步音频与视觉，球体随音乐脉动变形，用户可通过控件调整效果或拖动面板/球体互动。
• 项目展示了 Three.js（渲染与着色器）、Web Audio API（音频分析）和 GSAP（交互动画）如何结合，创造多感官体验，体现了创意编码的潜力。

author Filip Zrnzevic

#demo #codepen #动画 #svg #webgl #液态玻璃
Codepen Spark#453
Liquid and Glass 大合集
好多啊好多啊，我们前端花活就是多啊.webp

cosine - 前端人の日常频道

#优质博文 #前端 #css #WebGL #three #GLSL #demo #动画 coooool～ How to Create Interactive, Droplet-like Metaballs with Three.js and GLSL AI 摘要： 本文详细介绍了如何使用 Three.js 和 GLSL 创建具有互动性的液滴状 metaball 效果。通过片段着色器和光线步进技术，实现了多个球体无缝融合并响应鼠标移动的动态效果。教程从基础设置开始，逐步深入到光线步进、表面法线计算、…

#优质博文 #前端 #shaders #css #WebGL #course
从这个里面又学到很多，加上之前看到的，整理一下这几个 WebGL 学习资源推荐www

1. The Book of Shaders - 一本由 Patricio Gonzalez Vivo 和 Jen Lowe 编写的关于片段着色器（Fragment Shaders）的循序渐进指南，旨在帮助读者理解和掌握这一抽象而复杂的图形编程领域。
2. Three.js 之 1 Animation 动画 掘金早期难得的很高质量的 three 学习笔记一个系列，是 Three.js Journey（$95 终身访问）的学习笔记。
3. Discover three.js 由 three.js 核心开发者编写的完整教程，从基础到高级的系统性学习路径、包含实时代码编辑器、提供清晰的 2D 图表解释概念。
4. WebGL Academy 交互式 WebGL 和 3D 算法学习，在线 IDE 环境，支持语法高亮，涵盖从基础到高级的 WebGL 概念，包含物理模拟和高级渲染技术。
5. SB Code R3F Tutorials 内容涵盖 React Three Fiber 和 Drei 库的基础知识，逐步讲解相关概念，帮助学习者理解如何构建自己的项目并参与 React 生态系统。
6. WebGL 理论基础 & WebGL2 理论基础 从 WebGL 的基本理论讲起。

The Book of Shaders

Gentle step-by-step guide through the abstract and complex universe of Fragment Shaders.

#优质博文 #前端 #css #WebGL #three #GLSL #demo #动画
coooool～
How to Create Interactive, Droplet-like Metaballs with Three.js and GLSL

AI 摘要： 本文详细介绍了如何使用 Three.js 和 GLSL 创建具有互动性的液滴状 metaball 效果。通过片段着色器和光线步进技术，实现了多个球体无缝融合并响应鼠标移动的动态效果。教程从基础设置开始，逐步深入到光线步进、表面法线计算、平滑融合、噪声纹理添加以及鼠标互动的实现，适合对 WebGL 和着色器编程感兴趣的开发者学习和实践。

概览：介绍了演示的整体结构和构建步骤，包括全屏平面的设置、光线步进渲染球体、从球体到 metaball 的平滑过渡、添加噪声以获得液滴外观，以及通过鼠标移动模拟拉伸效果。

1. 全屏平面设置：创建覆盖整个视口的全屏平面，通过 Three.js 设置几何体和材质，并传递画布大小的 uniform 变量到着色器。
2. 光线步进渲染球体：在片段着色器中使用光线步进技术渲染球体，详细解释了光线步进的步骤、SDF（有符号距离函数）的概念，以及如何通过代码实现两个重叠球体的渲染。
3. 从球体到 Metaball：通过 smoothMin 函数平滑融合多个球体的距离值，避免硬边缘，创造出有机融合的 metaball 效果，并通过参数控制融合平滑度。
4. 添加噪声以获得液滴外观：利用 3D 值噪声技术对表面进行扰动，结合反射向量和时间变量生成液滴纹理，并通过后处理增强玻璃般的半透明效果。
5. 通过鼠标移动模拟拉伸液滴：通过记录鼠标轨迹并沿轨迹放置多个球体，实现液滴的拉伸和弹性运动效果，增强互动性。

author Yuki Kojima

#优质博文 #WebGL #性能优化 #前端
另外几篇性能优化（持续补充）：
1. WebGL大场景性能优化
2. Tips and Tricks for Optimizing WebGL Performance
...

www.msy.plus

WebGL大场景性能优化 - 墨抒颖

性能优化是一个比较大的话题，会涉及多个技术点，本篇文章旨在总结相关优化思路和方向，很多阐述都是浅尝辄止，并不对每项技术点做具体的深入剖析。对于大场景来说，一般优化可以分为以下几个大的优化方向。

#优质博文 #WebGL #性能优化 #前端
最近在性能优化。
WebGL优化方法

AI 摘要：本文详细介绍了 WebGL 性能优化的多种方法，涵盖了从性能瓶颈的识别到具体的技术实现，旨在帮助开发者提升 WebGL 应用的渲染效率。文章从 CPU 和 GPU 的性能测试入手，探讨了纹理优化、绘制调用减少、Shader 逻辑优化、三角形数量削减、内存传输优化等多个方面，提供了大量实用技巧和具体案例，适合对 WebGL 性能优化感兴趣的前端开发者深入学习。

• 性能瓶颈识别与测试
• 介绍了如何通过降低 CPU 或 GPU 的时钟频率来测试性能瓶颈，帮助开发者定位问题根源。
• 纹理优化
• 建议减少 canvas 尺寸或使用低分辨率纹理来测试纹理受限问题。
• 纹理过滤模式中，gl.NEAREST 速度最快但效果块状，gl.LINEAR 因取平均值而模糊。
• 推荐使用 Mip 映射技术优化纹理贴图效果。
• 纹理长宽建议为 2 的幂，采用纹理压缩（如 ETC 格式）减少数据量，使用 PBO 提升纹理上传速度，以及通过纹理合成减少加载次数。
• 上下文与 Program 管理
• 讨论了 WebGL 上下文丢失的处理方法。
• 建议避免频繁切换 Program，减少在 Shader 中使用 if-else 语句，因其会破坏 GPU 的并行计算（Wavefront 机制）。
• 绘制调用优化
• 使用 drawElements() 的 gl.TRIANGLE_STRIP 结合退化三角形，比 drawArrays() 的 gl.TRIANGLES 更节省内存。
• 减少 drawArrays() 和 drawElements() 调用次数，避免从 GPU 读回数据（如 gl.getError()、gl.readPixels()），以优化流水线性能。
• 使用 WebGL Inspector 工具查找冗余调用，减少状态变更操作（如 gl.enable()）。
• 顶点与模型优化
• 顶点数据按数组顺序组织，避免乱序以提高缓存命中率。
• 使用 LOD（细节层次）技术简化模型，根据距离动态调整细节。
• Shader 逻辑优化
• 避免在 Shader 中使用逻辑判断（如 if-else），因其破坏 GPU 并行度；提供替代方案，如使用 step 函数优化逻辑表达。
• 三角形数量优化
• 通过空间分割（如八叉树、四叉树）剔除不可见物体。
• 使用遮挡检测技术（如硬件遮挡查询）避免渲染被遮挡物体。
• 动态调整三角形数量（如 LOD 技术）。
• 使用 GL_TRIANGLE_FAN 或 GL_TRIANGLE_STRIP 替代 GL_TRIANGLES 以重用顶点。
• 采用 glDrawElements 的索引方式减少三角形数量。
• 内存传输优化
• 尽可能使用 VBO/VAO 减少数据传输。
• 在 OpenGL ES 3.0/WebGL 2.0 中利用 Transform Feedback 进行 GPU 通用计算。
• 通过批次合并和 Instance 特性优化多物体渲染效率。

author xcsf

xcsf's Blog

WebGL优化方法

找到性能瓶颈，尝试降低CPU或者GPU的时钟频率去测试哪个效率低 纹理受限，可以采取 减少canvas的长宽或者使用低分辨率的纹理测试；webgl 纹理绑定伸展和收缩效果时，gl.NEAREST 是最快的但会产生块状效果，gl.LINER因为是取平均值，会产生模糊 将Mip映射应用于纹理贴图 处理webgl丢失上下文的问题 不要经常切换program，在切换program和在着色器中使