呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
#NewsLetter #React #JavaScript #前端 #新动态
⚛️ React Status #437
⚛️ 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
author Lolo Armdz
看了这篇突然意识到我写的那篇好烂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
#博客更新 #前端 #WebGL #p5
从像素到粒子：p5.js 图像转动态粒子的设计与实现
疯狂叠甲，不行了，就先这样吧，这篇博文和项目搭建写的都比较匆忙，有很多写的比较烂的地方，毕竟是为需求服务的，重构本身就比较赶，后续应该会不断完善。
部分段落有使用 AI 进行润色和辅助，虽然很 AI 但是通俗易懂就留着了（要困死了先睡觉）
从像素到粒子：p5.js 图像转动态粒子的设计与实现
疯狂叠甲，不行了，就先这样吧，这篇博文和项目搭建写的都比较匆忙，有很多写的比较烂的地方，毕竟是为需求服务的，重构本身就比较赶，后续应该会不断完善。
部分段落有使用 AI 进行润色和辅助，虽然很 AI 但是通俗易懂就留着了（要困死了先睡觉）
#Newsletter #前端 #JavaScript #CSS #新动态 #AI
🚀 Frontend Focus #701
🚀 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 once worked with a UI designer who insisted it was impossible to create a product that was both within the Web Content Accessibility Guidelines (WCAG) and aesthetically pleasing. ‘It can be pretty…
#优质博文 #webgl #r3f #性能优化 #react
Three.js Instances: Rendering Multiple Objects Simultaneously
author Matias Gonzalez Fernandez
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
#优质博文 #chrome #webgl #性能优化 #浏览器 #新动态
Introducing Skia Graphite: Chrome's Rasterization Backend for the Future
author Claire Charron
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
科幻风格的 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
#优质博文 #前端 #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 的基本理论讲起。
从这个里面又学到很多，加上之前看到的，整理一下这几个 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 的基本理论讲起。
#优质博文 #前端 #css #WebGL #three #GLSL #demo #动画
coooool～
How to Create Interactive, Droplet-like Metaballs with Three.js and GLSL
author Yuki Kojima
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
...
另外几篇性能优化（持续补充）：
1. WebGL大场景性能优化
2. Tips and Tricks for Optimizing WebGL Performance
...
#优质博文 #WebGL #性能优化 #前端
最近在性能优化。
WebGL优化方法
author xcsf
最近在性能优化。
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
#优质博文 #前端 #css #javascript #新动态
🚀 Frontend Focus#695
🚀 Frontend Focus#695
AI 摘要：本文是《Frontend Focus》第 695 期（2025 年 6 月 4 日）的摘要，涵盖了前端开发的最新动态、技术教程和工具资源。文章重点介绍了 OKLCH 颜色生态系统及其工具、CSS 新功能（如 if() 函数和 reading-flow 属性）、Web 平台状态更新以及多个实用工具和教程，内容涉及 HTML 对话框样式优化、浏览器自动化工具、AI 在 Web 开发中的应用等，旨在为前端开发者提供前沿技术资讯和实用资源。
• OKLCH 颜色生态系统与工具 - 详细介绍了 OKLCH 颜色模型的优势，浏览器支持情况良好，并推荐了相关工具和最佳实践。还提到了一场题为《Programmable Colors: Bridging Design and Code》的相关演讲，值得观看。
• WebStatus.dev 更新：更丰富的数据与洞察 - 开源的 Web 平台状态网站新增了功能覆盖范围、使用时间线、移动端数据等更新，帮助开发者查询和跟踪各类 Web 功能在不同浏览器中的兼容性。
• CSS if() 函数与 reading-flow 属性（Chrome 137） - 展示了 CSS if() 函数的强大功能（目前仅在 Chrome 和 Edge 中可用）以及 reading-flow 属性的应用，附带简单直观的演示。额外推荐了 CSS Tricks 上关于 reading-flow 和 reading-order 的深入文章。
• Rachel Andrew 总结了 Web 平台的最新变化和重要新增功能 - 包括 if() 函数、Web Push 等
• [Astro 生态系统的最新动态](https://astro.build/blog/whats-new-may-2025
• Browser Company 停止开发 Arc 的原因说明
• IE6、AI 与 Web 浏览的未来：RL Nabors 开启新系列，探讨 AI 如何改变 Web，提出“Chrome 是下一个 IE6”的观点，分析 Google 偏离 Web 标准可能导致浏览器停滞。
• Smooothy：流畅、可扩展的滑块/轮播组件，包括键盘控制、视差、速度的自定义，以及 React 和 Vue 的实现。
• MiNi PhotoEditor：一款带有特效、滤镜和裁剪功能的在线 WebGL 照片编辑器 #webgl
• Bits UI：无头 Svelte 组件库 #组件库 #svelte
• 字体生成器 ：使用 Unicode 字符生成精美文本 ——输入一些文本，此工具将生成无数纯 Unicode 格式的精美字体，供您复制粘贴。示例：𝔽𝕣𝕠𝕟𝕥𝕖𝕟𝕕 𝔽𝕠𝕔𝕦𝕤、snɔoℲ puǝʇuoɹℲ、F͜͡r͜͡o͜͡n͜͡t͜͡e͜͡n͜͡d͜͡ F͜͡o͜͡c͜͡u͜͡s͜͡ 等等。不过，务必注意可访问性以及某些设备（例如屏幕阅读器）的处理方式。
evilmartians.com
Exploring the OKLCH ecosystem and its tools—Martian Chronicles, Evil Martians’ team blog
Explore a powerful set of tools built around the OKLCH color model—Harmonizer for accessible palettes, Polychrom for Figma contrast checking, apcach for color contrast calculations, and more. Perfect for frontend developers and designers building consistent…
#demo #codepen #webgl #动画
着色器时钟 \ WebGL 片段着色器
via CopenSpark#451
着色器时钟 \ WebGL 片段着色器
pjkarlik 分享了一个能根据一天中的时间改变颜色的奇妙 WebGL 时钟。“我脑子里一直在想这个，想做一个时钟着色器。数学运算有点乱，而且为了让表盘正常工作，在时间上还需要一些技巧性的逻辑"。
via CopenSpark#451
#前端 #webgl #新动态
这个好诶
https://forge.dev/
Source
这个好诶
https://forge.dev/
Asuka小能猫 (@AsukaOdysseus)：李飞飞团队开源了可商用的高斯喷溅web渲染器。
gaussian splatting 是目前3d场景重建最前沿的方法，效果好、速度快、只需要图片就能重建，去年开始大火，学术界机器人/自动驾驶/世界模型/视频生成都有很多应用。
国内在这块的application级别的应用几乎是空白。
Source
sparkjs.dev
An advanced 3D Gaussian Splatting renderer for THREE.js
