VaJoy

最近在尝试解析 Vue 3.6 的源码，前些天从底层构建系统着手，辛辛苦苦分析了 Vue 是如何通过 Rollup 和 esbuild 来分别构建出生产环境、开发环境产物的...

一、仅通过着色器实现的高斯模糊 在《高斯模糊和径向模糊的实现》一文中我们已经介绍了高斯模糊的原理和着色器实现，其原理为通过正态分布规律，分配权重来混合每个像素各方向附近的像...

一、液态玻璃效果介绍 苹果在 2025 年 6 月的 WWDC 上首次推出了液态玻璃（Liquid Glass） 效果，让界面元素呈现出仿佛由弯曲、可折射的玻璃构成的质感：...

在游戏视觉表现中，UV 扰动是一种常见却强大的渲染技巧，它通过对纹理坐标进行动态采样与扭曲，模拟出水面波动、热浪蒸腾、空间扭曲等实时视觉效果。 无论是战斗技能释放时引发的空...

流光动画是游戏视觉设计中不可或缺的动态效果之一，它常见于图标强调、道具边框、UI装饰等多种场景中。 该效果通过模拟高光沿表面流动的动态变化，为原本静态的图形注入细腻的光泽感...

一、法线和法线贴图 1.1 法线介绍 在计算机图形学中，法线（Normal） 是一个核心概念。它通常指的是一个垂直于物体表面的单位向量。 假设你有一张平坦的桌面，一支笔直立...

一、什么是有向距离场？ 1.1 介绍 有向距离场（Signed Distance Field，简称 SDF）是一种用函数来描述形状的方式： $$ SDF(p) = \pm ...

在某些场景可能需要创建多个摄像头 + RenderTexture 文件来叠加着色器效果，例如在《高斯模糊的实现》一文中，我们需要通过这种麻烦的操作来应用 gaussian-...

在游戏画面的实时渲染中，模糊效果不仅能提升画面质感，还常用于引导玩家视线、制造景深或动态速度感等视觉效果。 其中，高斯模糊（Gaussian Blur） 以其平滑柔和的特性...

一、奇怪的报错 在之前的文章中我们了解到，Cocos Creator 着色器里，所有非 sampler 类型的 uniform（如 float, vec4）都必须放到一个 ...

在游戏中，从场景 A 切换到场景 B 往往伴随着资源加载、接口请求等过程，这可能导致短暂的等待。为了避免用户感到枯燥或不适，加入一段生动有趣的转场动画，不仅可以缓解等待带来...

一、光照跟随介绍 光照跟随是一种模拟动态光源聚焦的技术，其核心表现为：画面四周呈现深色暗角，将玩家视线自然引导至中心区域——通常是主角或关键目标。 随着角色在场景中移动，这...

一、拖尾效果及原理 在游戏中，拖尾效果是一种常见的视觉表现手法。它表现为运动物体（如角色、子弹或特效）在移动路径上留下逐渐消散的痕迹，从而增强运动的速度感和动态视觉冲击力。...

溶解在游戏领域属于经常使用的动画特效，例如在角色死亡时，角色的形象逐步被侵蚀瓦解： 然而溶解虽然效果酷炫，但它其实是着色器中比较简单的实现，很多入门课程都会拿它来作为第一个...

一、描边原理 描边原理和边缘查找的实现类似。 材质上镂空处（Alpha=0）的某个点，要判断它是否需要绘制描边色值，可以向四周做多个方向的发射采样（发射距离为描边的尺寸），...

在 Photoshop 中，我们可以对顶层的图层选用指定的「图层混合模式」，来让它与底层图像实现不同的叠加效果： 在前端 CSS 中存在可实现同样叠加效果的 mix-ble...

在片元着色器中对像素颜色进行有规律的改动，可以实现各种有趣的滤镜效果。 本文会介绍部分常规着色器滤镜（效果见下图），它们大多是用固定范式来实现的。 一、灰阶滤镜 通过 GL...

一、着色器片段（Chunk） Cocos Creator 支持创建着色器片段文件（.chunk 格式）在跨文件中复用。在资源管理器某文件夹下点击右键，选择「创建 → 着色器...

一、纹理采样 在之前的文章中，我们在片元着色器输出了一个固定的 RGBA 色值，它与节点纹理无关，如果希望片元着色器中返回的色值与当前节点的纹理相关，则需要通过纹理采样获取...

在上篇文章我们编写了最简单的一个着色器 Effect 文件，来为一个节点染上完全不透明的绿色： 如果只想给节点设置 50% 的透明度，我们可能会觉得，把片元着色器入口函数返...