首页
AI Coding
NEW
沸点
课程
直播
活动
AI刷题
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
Shader My Head
VaJoy
创建于2025-05-20
订阅专栏
Cocos Creator Shader 探究专栏,从 Shake My Head 到 Shader My Head。
等 33 人订阅
共20篇文章
创建于2025-05-20
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
Cocos Creator Shader 入门 ⒆ —— UV 扰动动画
在游戏视觉表现中,UV 扰动是一种常见却强大的渲染技巧,它通过对纹理坐标进行动态采样与扭曲,模拟出水面波动、热浪蒸腾、空间扭曲等实时视觉效果。 无论是战斗技能释放时引发的空间变形,还是环境中流动的液态
Cocos Creator Shader 入门 ⒅ —— 流光动画
流光动画是游戏视觉设计中不可或缺的动态效果之一,它常见于图标强调、道具边框、UI装饰等多种场景中。 该效果通过模拟高光沿表面流动的动态变化,为原本静态的图形注入细腻的光泽感和强烈的动感表现,不仅能显著
Cocos Creator Shader 入门 ⒄ —— 法线贴图和高度贴图
一、法线和法线贴图 1.1 法线介绍 在计算机图形学中,法线(Normal) 是一个核心概念。它通常指的是一个垂直于物体表面的单位向量。 假设你有一张平坦的桌面,一支笔直立在桌面正中央,笔的方向就可以
Cocos Creator Shader 入门 ⒃ —— 有向距离场 SDF
一、什么是有向距离场? 1.1 介绍 有向距离场(Signed Distance Field,简称 SDF)是一种用函数来描述形状的方式: $$ SDF(p) = \pm \min_{q \in su
Cocos Creator Shader 入门 ⒂ —— 自定义后处理管线
在某些场景可能需要创建多个摄像头 + RenderTexture 文件来叠加着色器效果,例如在《高斯模糊的实现》一文中,我们需要通过这种麻烦的操作来应用 gaussian-blur-vertical.
Cocos Creator Shader 入门 ⒁ —— 高斯模糊和径向模糊的实现
在游戏画面的实时渲染中,模糊效果不仅能提升画面质感,还常用于引导玩家视线、制造景深或动态速度感等视觉效果。 其中,高斯模糊(Gaussian Blur) 以其平滑柔和的特性,被广泛应用于景深、UI 背
Cocos Creator Shader 入门 ⒀ —— UBO 内存布局策略
一、奇怪的报错 在之前的文章中我们了解到,Cocos Creator 着色器里,所有非 sampler 类型的 uniform(如 float, vec4)都必须放到一个 UBO(Uniform Bl
Cocos Creator Shader 入门 ⑿ —— 转场动画
在游戏中,从场景 A 切换到场景 B 往往伴随着资源加载、接口请求等过程,这可能导致短暂的等待。为了避免用户感到枯燥或不适,加入一段生动有趣的转场动画,不仅可以缓解等待带来的不适感,还能弱化转场的生硬
Cocos Creator Shader 入门 ⑾ —— 光照跟随
一、光照跟随介绍 光照跟随是一种模拟动态光源聚焦的技术,其核心表现为:画面四周呈现深色暗角,将玩家视线自然引导至中心区域——通常是主角或关键目标。 随着角色在场景中移动,这个被照亮的中心区域也随之移动
Cocos Creator Shader 入门 ⑽ —— 拖尾效果的实现
一、拖尾效果及原理 在游戏中,拖尾效果是一种常见的视觉表现手法。它表现为运动物体(如角色、子弹或特效)在移动路径上留下逐渐消散的痕迹,从而增强运动的速度感和动态视觉冲击力。 拖尾效果最简单的实现,就是
Cocos Creator Shader 入门 ⑼ —— 溶解动画
溶解在游戏领域属于经常使用的动画特效,例如在角色死亡时,角色的形象逐步被侵蚀瓦解: 然而溶解虽然效果酷炫,但它其实是着色器中比较简单的实现,很多入门课程都会拿它来作为第一个演示案例。 本文将介绍溶解动
Cocos Creator Shader 入门 ⑻ —— 描边和发光效果的实现
一、描边原理 描边原理和边缘查找的实现类似。 材质上镂空处(Alpha=0)的某个点,要判断它是否需要绘制描边色值,可以向四周做多个方向的发射采样(发射距离为描边的尺寸),查找最临近的实心(Alpha
Cocos Creator Shader 入门 ⑺ —— 图层混合样式的实现与 Render Texture
在 Photoshop 中,我们可以对顶层的图层选用指定的「图层混合模式」,来让它与底层图像实现不同的叠加效果: 在前端 CSS 中存在可实现同样叠加效果的 mix-blend-mode 属性,可以实
Cocos Creator Shader 入门 ⑹ —— 灰阶、反色等滤镜的实现
在片元着色器中对像素颜色进行有规律的改动,可以实现各种有趣的滤镜效果。 本文会介绍部分常规着色器滤镜(效果见下图),它们大多是用固定范式来实现的。 一、灰阶滤镜 通过 GLSL 内置的 dot 函数,
Cocos Creator Shader 入门 ⑸ —— 代码复用与绿幕抠图技术
一、着色器片段(Chunk) Cocos Creator 支持创建着色器片段文件(.chunk 格式)在跨文件中复用。在资源管理器某文件夹下点击右键,选择「创建 → 着色器片段」即可创建一个 Chun
Cocos Creator Shader 入门 ⑷ —— 纹理采样与受击闪白的实现
一、纹理采样 在之前的文章中,我们在片元着色器输出了一个固定的 RGBA 色值,它与节点纹理无关,如果希望片元着色器中返回的色值与当前节点的纹理相关,则需要通过纹理采样获取像素颜色。 纹理采样的流程大
Cocos Creator Shader 入门 ⑶ —— 给染色节点设置透明度
在上篇文章我们编写了最简单的一个着色器 Effect 文件,来为一个节点染上完全不透明的绿色: 如果只想给节点设置 50% 的透明度,我们可能会觉得,把片元着色器入口函数返回的 Alpha 值更改为
Cocos Creator Shader 入门 ⑵ —— 节点染色与着色器语法
一、在 Cocos Creator 中编写 Shader 在 Cocos Creator 中,着色器是以 Effect 文件(扩展名为 .effect)的形式存在的,且需要在节点组件(例如 Sprit
Cocos Creator Shader —— 附录
Cocos Creator Shader 入门与精通系列文章附录。 用于记录一些知识杂项,做为配套查询的工具书使用。
Cocos Creator Shader 入门 ⑴ —— 什么是 Shader?
Cocos Creator Shader 系列文章开篇。 本系列文章收录于个人专栏 ShaderMyHead:https://juejin.cn/column/7505952781289226291