https://blog.qife122.com/tags/%E7%9D%80%E8%89%B2%E5%99%A8/ Recent content in 着色器 on 办公AI智能小助手 Hugo zh-cn qife Mon, 10 Nov 2025 19:25:43 +0800 https://blog.qife122.com/p/%E4%BA%A4%E4%BA%92%E9%AD%94%E6%B3%95%E7%9A%84%E8%89%BA%E6%9C%AFkarim-maaloul%E7%9A%84%E5%88%9B%E6%84%8F%E6%8A%80%E6%9C%AF%E4%B8%96%E7%95%8C/ Mon, 10 Nov 2025 19:25:43 +0800 https://blog.qife122.com/p/%E4%BA%A4%E4%BA%92%E9%AD%94%E6%B3%95%E7%9A%84%E8%89%BA%E6%9C%AFkarim-maaloul%E7%9A%84%E5%88%9B%E6%84%8F%E6%8A%80%E6%9C%AF%E4%B8%96%E7%95%8C/ <h2 id="创意之旅">创意之旅</h2> <p>我是Karim，EPIC Agency的联合创始人兼创意总监。我带领一支才华横溢的设计师团队，并与EPIC的技术开发人员紧密合作，打造美观且用户友好的网站。</p> https://blog.qife122.com/p/%E5%89%96%E6%9E%90%E6%B3%A2%E6%B5%AA%E7%9D%80%E8%89%B2%E5%99%A8%E6%AD%A3%E5%BC%A6%E6%B3%A2%E6%8A%98%E5%B0%84%E4%B8%8E%E6%84%8F%E5%A4%96%E5%8F%91%E7%8E%B0/ Sun, 09 Nov 2025 18:50:47 +0800 https://blog.qife122.com/p/%E5%89%96%E6%9E%90%E6%B3%A2%E6%B5%AA%E7%9D%80%E8%89%B2%E5%99%A8%E6%AD%A3%E5%BC%A6%E6%B3%A2%E6%8A%98%E5%B0%84%E4%B8%8E%E6%84%8F%E5%A4%96%E5%8F%91%E7%8E%B0/ <h2 id="演示">演示</h2> <p>代码</p> <p>免费课程推荐：通过34个免费视频课程、分步项目和动手演示，掌握GSAP的JavaScript动画。立即报名 →</p> <p>每个创意工作室都有其奇怪的内部仪式。 我们的？一个名为“12个月12支笔”的挑战——每月一个实验，没有规则，没有客户，只是玩耍。 在咖啡因和混乱之间，我们的一个开发者做出了这个——一个波浪状、催眠的、果冻般的运动效果，立即成为团队的最爱。我们没打算做任何“严肃”的东西，但人们开始问它是如何工作的，于是我们就在这里——在Codrops上写关于它的文章！</p> https://blog.qife122.com/p/%E4%BD%BF%E7%94%A8gsap%E5%8A%A8%E7%94%BB%E5%8C%96webgl%E7%9D%80%E8%89%B2%E5%99%A8%E6%B6%9F%E6%BC%AA%E6%8F%AD%E7%A4%BA%E4%B8%8E%E5%8A%A8%E6%80%81%E6%A8%A1%E7%B3%8A%E6%95%88%E6%9E%9C/ Tue, 04 Nov 2025 08:05:40 +0800 https://blog.qife122.com/p/%E4%BD%BF%E7%94%A8gsap%E5%8A%A8%E7%94%BB%E5%8C%96webgl%E7%9D%80%E8%89%B2%E5%99%A8%E6%B6%9F%E6%BC%AA%E6%8F%AD%E7%A4%BA%E4%B8%8E%E5%8A%A8%E6%80%81%E6%A8%A1%E7%B3%8A%E6%95%88%E6%9E%9C/ <h1 id="创建html结构">创建HTML结构</h1> <p>作为第一步，我们将使用HTML设置页面。我们将创建一个不指定尺寸的容器，允许其超出页面宽度。然后，我们将主容器的overflow属性设置为hidden，因为页面稍后将通过GSAP Draggable和ScrollTrigger功能实现交互。</p> https://blog.qife122.com/p/%E7%94%A8%E7%9D%80%E8%89%B2%E5%99%A8%E5%AD%A6%E4%B9%A0%E5%88%9B%E6%84%8F%E7%BC%96%E7%A8%8B%E7%9A%84fragments%E5%B9%B3%E5%8F%B0/ Mon, 03 Nov 2025 13:17:42 +0800 https://blog.qife122.com/p/%E7%94%A8%E7%9D%80%E8%89%B2%E5%99%A8%E5%AD%A6%E4%B9%A0%E5%88%9B%E6%84%8F%E7%BC%96%E7%A8%8B%E7%9A%84fragments%E5%B9%B3%E5%8F%B0/ <h1 id="fragments用着色器学习创意编程的平台">Fragments：用着色器学习创意编程的平台</h1> <p>一种动手学习着色器的方式：探索技术、调整现成的实用工具，并重新混合120多个草图，将基础知识转化为独特的生成艺术。</p> <h2 id="一切如何开始">一切如何开始</h2> <p>在我20多岁时，也就是很久以前，我突然灵光一现想要构建一个音频可视化工具。就像是Winamp的MilkDrop插件（这可能暴露了我的年龄）。我沉迷于这个想法，但我不知道如何实际实现它。</p> https://blog.qife122.com/p/%E5%89%96%E6%9E%90%E6%B3%A2%E6%B5%AA%E7%9D%80%E8%89%B2%E5%99%A8%E6%AD%A3%E5%BC%A6%E6%8A%98%E5%B0%84%E4%B8%8E%E5%81%B6%E7%84%B6%E4%B9%8B%E7%BE%8E/ Sun, 26 Oct 2025 05:44:26 +0800 https://blog.qife122.com/p/%E5%89%96%E6%9E%90%E6%B3%A2%E6%B5%AA%E7%9D%80%E8%89%B2%E5%99%A8%E6%AD%A3%E5%BC%A6%E6%8A%98%E5%B0%84%E4%B8%8E%E5%81%B6%E7%84%B6%E4%B9%8B%E7%BE%8E/ <h1 id="剖析波浪着色器正弦折射与偶然之美">剖析波浪着色器：正弦、折射与偶然之美</h1> <p>逐步解析一个意外动画实验背后的数学原理和GPU逻辑。</p> <h2 id="概念起源">概念起源</h2> <p>这个想法最初很简单：我们能否创造一种有机的运动感觉——不是机械的，不是线性的，而是某种流动的东西？</p> https://blog.qife122.com/p/%E4%BD%BF%E7%94%A8gsap%E5%8A%A8%E7%94%BB%E5%8C%96webgl%E7%9D%80%E8%89%B2%E5%99%A8%E6%B6%9F%E6%BC%AA%E6%8F%AD%E7%A4%BA%E4%B8%8E%E5%8A%A8%E6%80%81%E6%A8%A1%E7%B3%8A%E6%95%88%E6%9E%9C/ Tue, 21 Oct 2025 13:24:42 +0800 https://blog.qife122.com/p/%E4%BD%BF%E7%94%A8gsap%E5%8A%A8%E7%94%BB%E5%8C%96webgl%E7%9D%80%E8%89%B2%E5%99%A8%E6%B6%9F%E6%BC%AA%E6%8F%AD%E7%A4%BA%E4%B8%8E%E5%8A%A8%E6%80%81%E6%A8%A1%E7%B3%8A%E6%95%88%E6%9E%9C/ <h1 id="创建html结构">创建HTML结构</h1> <p>作为第一步，我们将使用HTML设置页面。我们将创建一个不指定尺寸的容器，允许其超出页面宽度。然后，我们将主容器的overflow属性设置为hidden，因为页面稍后将通过GSAP的Draggable和ScrollTrigger功能实现交互。</p> https://blog.qife122.com/p/%E7%94%A8%E7%9D%80%E8%89%B2%E5%99%A8%E5%AD%A6%E4%B9%A0%E5%88%9B%E6%84%8F%E7%BC%96%E7%A8%8Bfragments%E5%B9%B3%E5%8F%B0%E6%B7%B1%E5%BA%A6%E8%A7%A3%E6%9E%90/ Mon, 20 Oct 2025 20:36:22 +0800 https://blog.qife122.com/p/%E7%94%A8%E7%9D%80%E8%89%B2%E5%99%A8%E5%AD%A6%E4%B9%A0%E5%88%9B%E6%84%8F%E7%BC%96%E7%A8%8Bfragments%E5%B9%B3%E5%8F%B0%E6%B7%B1%E5%BA%A6%E8%A7%A3%E6%9E%90/ <h1 id="fragments一个通过着色器学习创意编程的平台">Fragments：一个通过着色器学习创意编程的平台</h1> <p>一种动手学习着色器的方式：探索技术、调整现成实用工具，并重新混合120多个草图，将基础知识转化为独特的生成艺术。</p> <h2 id="一切如何开始">一切如何开始</h2> <p>在我20多岁时，很久以前，我突然想到要构建一个音频可视化工具。类似于Winamp的MilkDrop插件（这可能暴露了我的年龄）。我沉迷于这个想法，但不知道如何实际实现。</p> https://blog.qife122.com/p/%E7%94%A8280%E5%AD%97%E7%AC%A6%E5%BB%BA%E6%A8%A1%E4%B8%96%E7%95%8C%E6%8E%A2%E7%B4%A2%E4%BB%A3%E7%A0%81%E8%89%BA%E6%9C%AF%E4%B8%8E%E7%BA%A6%E6%9D%9F%E7%9A%84%E5%BE%AE%E5%9E%8B%E7%9D%80%E8%89%B2%E5%99%A8%E5%88%9B%E4%BD%9C/ Thu, 18 Sep 2025 11:32:31 +0800 https://blog.qife122.com/p/%E7%94%A8280%E5%AD%97%E7%AC%A6%E5%BB%BA%E6%A8%A1%E4%B8%96%E7%95%8C%E6%8E%A2%E7%B4%A2%E4%BB%A3%E7%A0%81%E8%89%BA%E6%9C%AF%E4%B8%8E%E7%BA%A6%E6%9D%9F%E7%9A%84%E5%BE%AE%E5%9E%8B%E7%9D%80%E8%89%B2%E5%99%A8%E5%88%9B%E4%BD%9C/ <h1 id="用280字符建模世界">用280字符建模世界</h1> <p>作为图形程序员，我的工作本质上是使用数学公式让像素变得更美观。我为游戏和软件中的动画背景处理光照、反射、后处理等视频效果。闲暇时，我喜欢编写能嵌入“推文”（280字符或更少）的紧凑着色器程序来放松身心。你可能在X/Twitter上见过一些这样的作品。将代码压缩同时保持功能的过程被称为“代码高尔夫”。</p> https://blog.qife122.com/p/webgl%E4%BA%A4%E4%BA%92%E5%BC%8F%E8%83%8C%E6%99%AF%E5%BF%AB%E9%80%9F%E6%8E%8C%E6%8F%A1bayer%E6%8A%96%E5%8A%A8%E6%8A%80%E6%9C%AF/ Thu, 18 Sep 2025 07:33:49 +0800 https://blog.qife122.com/p/webgl%E4%BA%A4%E4%BA%92%E5%BC%8F%E8%83%8C%E6%99%AF%E5%BF%AB%E9%80%9F%E6%8E%8C%E6%8F%A1bayer%E6%8A%96%E5%8A%A8%E6%8A%80%E6%9C%AF/ <h1 id="webgl交互式背景bayer抖动快速指南">WebGL交互式背景：Bayer抖动快速指南</h1> <p>用户体验依赖于那些融入整体设计而不压倒用户的小而周到的细节。这种平衡可能很棘手，尤其是使用像WebGL这样的技术。虽然它们可以创建惊人的视觉效果，但如果处理不当，也可能变得过于复杂和分散注意力。</p> https://blog.qife122.com/p/%E7%94%A8280%E5%AD%97%E7%AC%A6%E5%BB%BA%E6%A8%A1%E4%B8%96%E7%95%8C%E6%8E%A2%E7%B4%A2%E4%BB%A3%E7%A0%81%E8%89%BA%E6%9C%AF%E4%B8%8E%E7%BA%A6%E6%9D%9F%E7%9A%84%E5%BE%AE%E5%9E%8B%E7%9D%80%E8%89%B2%E5%99%A8%E5%88%9B%E4%BD%9C/ Sat, 06 Sep 2025 14:22:08 +0800 https://blog.qife122.com/p/%E7%94%A8280%E5%AD%97%E7%AC%A6%E5%BB%BA%E6%A8%A1%E4%B8%96%E7%95%8C%E6%8E%A2%E7%B4%A2%E4%BB%A3%E7%A0%81%E8%89%BA%E6%9C%AF%E4%B8%8E%E7%BA%A6%E6%9D%9F%E7%9A%84%E5%BE%AE%E5%9E%8B%E7%9D%80%E8%89%B2%E5%99%A8%E5%88%9B%E4%BD%9C/ <h1 id="用280字符建模世界">用280字符建模世界</h1> <p>一位图形程序员对创作微型、富有表现力的着色器的心态、方法和动机的探索，这些着色器结合了代码、艺术和约束。</p> <h2 id="引言">引言</h2> <p>我是Xor。作为一名图形程序员，我的工作本质上是使用数学公式让像素变得更漂亮。我为游戏和软件中的动画背景处理视频效果，如光照、反射和后处理等。</p> https://blog.qife122.com/p/webgl%E4%BA%A4%E4%BA%92%E5%BC%8F%E8%83%8C%E6%99%AFbayer%E6%8A%96%E5%8A%A8%E7%AE%97%E6%B3%95%E5%BF%AB%E9%80%9F%E6%8C%87%E5%8D%97/ Fri, 05 Sep 2025 01:01:34 +0800 https://blog.qife122.com/p/webgl%E4%BA%A4%E4%BA%92%E5%BC%8F%E8%83%8C%E6%99%AFbayer%E6%8A%96%E5%8A%A8%E7%AE%97%E6%B3%95%E5%BF%AB%E9%80%9F%E6%8C%87%E5%8D%97/ <h1 id="webgl交互式背景bayer抖动算法快速指南">WebGL交互式背景：Bayer抖动算法快速指南</h1> <p>用户体验依赖于那些巧妙融入整体设计而不喧宾夺主的小细节。这种平衡很难把握，特别是在使用WebGL等技术时。虽然它们能创造惊人的视觉效果，但如果处理不当，也可能变得过于复杂和分散注意力。</p>