Cocos Creator教程：Shader与材质

2024-04-21 04:47:19

Cocos creator 2.1以后引入了3D渲染的底层，所以引入了Shader和材质系统，比如精灵,下面有一个材质, 材质又选了一个Shader;

1: 什么是Shader和材质?

Shader是一种给显卡GPU执行的程序, 是一种绘制算法，显卡的渲染流水线加载Shader代码后，就能够在绘制的时候执行Shader的代码。Cocos 有自己的一个Shader的结构，Shader的开发语言cocos使用的是GLSL编程语言。

材质是一种配置文件，选好一个Shader,并指定好这个Shader所需要的参数；

2: cocos 物体是如何绘制的?

以Sprite组件为例，它有一个材质，这个时候绘制图片的时候，就使用这个材质，通过材质渲染管道准备好算法，和参数，这样，渲染管道就绘制出来。

2: 完整的Shader渲染流程(pass)

3: cocos Shader的结构

1: 描述部分

顶点shader在哪里，着色shader在哪里？材质上的参数定义哪些，这个是描述部分。

2: 顶点Shader部分:

3: 着色Shader部分:

4: GLSL常用的概念:

GLSL变量精度级别： highp, mediump, lowp (高, 中, 低)

attribute: 渲染管道传过来的数据, 只能在顶点Shader中使用;

varying: vectex Shader, frag Shader 的传递变量

uniform: 外部程序可以来设置的变量;

如果需要完整告诉模糊Shader的同学，可以进入学习小组学习

Cocos Creator教程：Shader与材质相关推荐

Cocos Creator 教程:生成二维码
一般做应用推广时,都会做一个自己的推广二维码.由于每个人的推广二维码都不一样,这就需要前端用代码生成属于用户个人的推广二维码.话不多说,下面讲解如何用Creator 生成用户专属推广二维码,文章最后会 ...
快速入门 Cocos Creator 3D Shader 上篇
前言 Shader,又名着色器,是控制 GPU 绘制的指令集.从某种意义来说,着色器是一个把输入转换到输出的程序,为图形渲染管线的某个特定部分而运行.图形渲染管线是渲染的核心组件.通过给定虚拟相机.3 ...
Cocos Creator教程 ——（一）Hello World
目录一.新建项目二.资管管理器三.层级编辑器四.属性检查器五.内容来源一.新建项目我们先通过一个简单的项目了解Cocos的基本结构: 打开cocos creator,在下面界面中选择&q ...
cocos creator 使用shader 不要勾选项目设置的动态图集和图片的自动合批
学习链接 https://forum.cocos.org/t/creator-shader-2019-10-22-2-2-0/82548 因为主要目的是为了避开cocos creator Mask的 ...
Cocos Creator教程 ——（二）UI系统介绍（上）
目录前言一.Sprite(精灵) 二.Label(文字) 三.Weight(对齐挂件) 四.Layout(自动布局) 前言这里会通过一个demo项目去介绍现在的UI系统有生产什么游戏的能力,以及 ...
cocos creator教程【打造路径编辑系统】
路径编辑系统在地图里面是非常重要的一项技术,他可以给NPC或怪物编辑地图路径,比如塔防游戏的地图路径,比如捕鱼达人的鱼阵路径,那么cocos creator如何实现了,今天分享一个技巧使用动画编辑器 ...
cocos creator | 为什么 shader 效果在编辑器中显示正常，运行后却显示异常？合图纹理的uv计算
获取源码,请关注公众号: 感谢QQ群(521643513)内 honmono 大佬的指导 01 uv 坐标之后的文章中,我们再详细介绍顶点着色器,片段着色器,纹理等知识这里简单了解下基本概念渲染 ...
cocos creator 3d 3.0《懒猫跑酷》实战开发教程
文章目录 01搭建开发环境hello world 02 导入3D资源,搭建游戏场景 03 控制猫移动 04生成无缝地图 05生成障碍物和鱼 06 碰撞检测+动画编辑器 07 UI模块和UI适配(位图字 ...
cocos creator粒子不变色_隐秘的物理粒子系统与渲染！Cocos Creator LiquidFun !
让 cocos Q弹起来!物理流体之 LiquidFun 流体纹理 shader ! 效果预览让 Cocos Q弹起来吧! 原理物理粒子系统引擎内置的 box2d.js 其实已经携带了 goog ...

最新文章

热门文章