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 #shaders
经常用～
Holograms, light-leaks and how to build CSS-only shaders

AI 摘要：本文探讨了如何使用 CSS 的 mix-blend-mode 属性创建类似 WebGL 着色器的视觉效果，而无需依赖 JavaScript。作者 Robb Owen 详细介绍了通过 CSS 层叠、渐变和混合模式实现动态光效（如全息图、光漏等）的技术，强调了 CSS 在视觉效果上的潜力，同时也指出了性能问题，建议在实际应用中保持克制。

• 引言
介绍了 WebGL 和 GLSL 着色器在网页设计中的重要性，并提出 CSS 也可以通过 mix-blend-mode 实现类似效果，避免引入 JavaScript 依赖。展示了滚动时图像光效从橙色渐变为蓝色的示例，包含镜头光晕效果。
• 什么是 CSS '着色器'？
解释了 CSS 着色器的基本概念，即通过图像和多层 background-image 叠加，使用渐变、遮罩和混合模式控制层间互动。提供了基础 HTML 和 CSS 结构代码，确保各层与底层图像对齐。
• 模拟镜面反射（Specularity）
描述了如何使用渐变模拟光线从明到暗的变化，并通过 background-attachment: fixed 属性引入滚动时的动态效果，模拟视角变化的光反射效果。
• 了解混合模式（Blend Modes）
详细介绍了 CSS 中常用的混合模式（如 multiply、screen、color-dodge、color-burn），通过示例图像展示了各模式如何影响像素颜色混合的效果，为后续效果实现奠定基础。
• 层叠合成（Compositing Layers）
讲解了通过嵌套 div 和多重 mix-blend-mode 实现复杂的层叠效果，使用暗色图像作为遮罩（specular map）控制光照区域，结合 color-dodge 模式增强阳光绽放效果。
• 最终着色器效果
提供了完整的 HTML 和 CSS 代码，展示了效果的最终呈现，并通过视图模式切换帮助读者理解各层如何协同工作形成最终图像。
• 进一步探索，通过多个示例展示了 CSS 着色器的多样应用，包括
• 极光效果（Aurora Borealis）：通过重复渐变和 screen 模式模拟极光波动。
• 光漏效果（Light-leak）：使用彩色遮罩和红橙渐变模拟老式相机光漏。
• 全息图效果（Hologram）：通过多层遮罩和反向渐变结合 color-burn 模式实现双向全息效果。
• 总结与性能问题
强调了现代 CSS 的强大功能，但也指出了 mix-blend-mode 的性能问题，尤其是在复杂效果和动画中的表现。作者尝试了 backface-visibility: hidden 优化性能，但效果有限，并提醒读者谨慎使用此类技术。

author Robb

Robb Owen Digital

Holograms, light-leaks and how to build CSS-only shaders.

Get a shiny WebGL look without actually using WebGL. In this article we take a look at how CSS blend modes unleash the potential of cool compositing effects without the need for JavaScript