文章分类 -  CocosCreator问题集 / shader / Cocos Shader

<十六>入门CocosShader之实现贴图溶解效果
摘要：前言 如果想实现一个溶解效果，就需要标记哪些像素要显示，哪些像素要消失。比较好的办法是用一张噪声图来给每一个像素做标记，噪声图类似下图。由于噪声图只有黑白灰三种颜色，黑白灰非均匀分布，因此，可以利用黑透、白不透、灰半透的原理实现不规则溶解效果。 溶解效果最简单的制作通常需要两个参数：一个是噪声图，一 阅读全文
posted @ 2025-02-20 17:45 EricShx 阅读(94) 评论(0) 推荐(0)
<十五>入门CocosShader之改造精灵Shader
摘要：前言 在CocosEffect中内置有一个shader--builtin-sprite，它在基础绘图 shader 的基础上增加了纹理的处理。 Sprite Shader 在资源管理器中创建一个sprite.effect,拷贝 builtin-sprite 内所有的内容 // Copyright ( 阅读全文
posted @ 2025-02-20 17:13 EricShx 阅读(128) 评论(0) 推荐(0)
<十四>入门CocosShader之CocosCreator3.x案例应用
摘要：前言 如何在CocosCreator3.x中绘制一个如同上篇中的矩形呢？ CocosShader对Shader的功能做了多层封装，开发者根据需要组装即可。 根据之前的矩形绘制流程可以分为以下几步： 数据准备 提供顶点数据，在之前的示例中提供的是一组固定的数据。 在CocosCreator中有很多地方 阅读全文
posted @ 2025-02-20 16:20 EricShx 阅读(134) 评论(0) 推荐(0)
<十三>入门CocosShader之纹理映射
摘要：前言 前几篇的绘制都是基于基础图元的绘制，想要绘制的内容更真实，就需要更多顶点和更丰富的颜色。可以通过增加一张纹理来为物体添加更多的细节。 “纹理映射”是纹理应用中很重要的一项技术。 所谓的纹理映射，就是将一张图片映射到一个几何图形的表面上去。 举个例子： 如果将之前绘制的矩形填充纯白色的颜色值，它 阅读全文
posted @ 2025-02-20 15:28 EricShx 阅读(75) 评论(0) 推荐(0)
<十二>入门CocosShader之高效绘制多个不同颜色的三角形
摘要：前言 举个例子，如果要绘制一个矩形，接上文增加3个顶点坐标来绘制2个三角形以达成目的，确实绘制成功了。但原本绘制一个矩形实际上只需要4个顶点就够了，其中的2个顶点是重复的，这里却增加了2个顶点的消耗。同理如果绘制的图形越复杂，还是通过这种方式，开销就会越来越大。 在实际开发中的解决方案是提供最优顶点 阅读全文
posted @ 2025-02-20 10:54 EricShx 阅读(29) 评论(0) 推荐(0)
<十一>入门CocosShader之顶点着色器和片元着色器
摘要：创建项目 创建一个shader文件夹，在文件夹下创建一个html文件，一个js文件，两个文件都命名为shader. 编写代码 准备顶点数据 在开始编写图形绘制代码前必须先给WebGL一些顶点数据 假如需要渲染一个平面三角形，就需要输入3个顶点 因为是平面三角形，所以没有深度z，使用二维位置定义即可， 阅读全文
posted @ 2025-02-19 17:55 EricShx 阅读(63) 评论(0) 推荐(0)
<十>入门CocosShader之WebGL基础知识
摘要：渲染管线 渲染管线描述了游戏中一帧渲染的流程顺序，包含了所有渲染有关的环节。 涉及到的核心硬件是CPU和GPU。 CPU是单行通道，处理任务的效率取决于处理单个任务的时间。 CPU处理复杂的逻辑以及大型的任务都游刃有余，但处理图像的效率却很低。这是因为图像是有成千上万个像素点构成的，每一个像素的处理 阅读全文
posted @ 2025-02-18 14:13 EricShx 阅读(43) 评论(0) 推荐(0)
<九>编写一个可以调整图片亮度和饱和度的Shader
摘要：1.复制一个bultin-sprite 2.编写片元着色器 // Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd. CCEffect %{ techniques: - passes: - vert: sprite-vs:vert frag: 阅读全文
posted @ 2025-02-14 17:08 EricShx 阅读(38) 评论(0) 推荐(0)
<八>：CocosShader标准注释一
摘要：// Effect Syntax Guide: https://docs.cocos.com/creator/manual/zh/shader/index.html CCEffect %{ techniques: #标准结构，在 Cocos Shader 中,由 CCEffect 包裹的部分是由 Y 阅读全文
posted @ 2025-02-11 17:39 EricShx 阅读(93) 评论(0) 推荐(0)
<七>Cocos Shader语法
摘要：Cocos Creator 中的着色器（Cocos Shader ，文件扩展名为 *.effect），是一种基于 YAML 和 GLSL 的单源码嵌入式领域特定语言（single-source embedded domain-specific language），YAML 部分声明流程控制清单，GL 阅读全文
posted @ 2025-01-24 13:32 EricShx 阅读(301) 评论(0) 推荐(0)
<六>YAML基本介绍和使用语法
摘要：在CocosCreator Shader中，使用YAML语言声明流程控制清单。 这里介绍一下外部的YAML。 1.概述 YAML是一种计算机数据序列化语言。和JSON类似，因其良好的跨语言、跨平台、易于理解、格式简单而广泛应用于配置文件、数据文件、日志文件等。 2.数据类型 YAML文档以人类可读的 阅读全文
posted @ 2025-01-23 20:13 EricShx 阅读(40) 评论(0) 推荐(0)
<五>线性代数中的矩阵 && 矩阵运算
摘要：1.初识矩阵 1.1 从二元一次方程组开始 二元一次方程：方程中未知数的个数是两个，未知数的指数的次数是一次 二元一次方程组：两个二元一次方程就组成了一个方程组 求解以上方程组有两种方法： 代入消元法是将第一个方程变形代入第二个方程。 加减消元法是将两边同时乘以一个数，然后相加消除其中的一个变量。 阅读全文
posted @ 2025-01-23 18:28 EricShx 阅读(49) 评论(0) 推荐(0)
<四>高等数学：向量及线性运算、数量积、向量积
摘要：1.向量 1.1 向量的概念 在物理概念中，把即有“大小”又有“方向”的量称为“矢量”。 在数学概念中，把从“起点”指向“终点”的即有“大小”又有“方向”的量叫做“向量”。 在向量的概念中，"大小"和“方向”缺一不可。 如果两个向量“相等”，那表示两个向量的“大小”和“方向”都相同。 1.2 向量的 阅读全文
posted @ 2025-01-23 18:09 EricShx 阅读(1664) 评论(0) 推荐(0)
<三>着色器编程语言GLSL
摘要：1.基本数据类型 1.0 标量： bool 布尔类型 true,false int 带符号的整数 signed integer float 带符号的浮点数 floating scalar 需要注意的是float,在顶点着色器中可以直接声明使用浮点类型变量，而片元着色器中需要指定浮点类型变量的精度，否 阅读全文
posted @ 2024-12-27 19:08 EricShx 阅读(211) 评论(0) 推荐(0)
<二>OpenGL渲染管线
摘要：渲染管线（渲染流水线/渲染处理流程）。 OpenGl ES2.0 渲染管线 1.0 基本处理 基本处理阶段设定3D空间中物体的顶点坐标，顶点对应颜色，顶点的纹理坐标等属性。并且之指定绘制方式：点绘制，线绘制，三角形绘制。为图元装配做准备。 1.1 顶点缓冲对象 这部分功能在程序中是可选的。对于某些场 阅读全文
posted @ 2024-12-25 19:48 EricShx 阅读(213) 评论(0) 推荐(0)
<一>Cocos Shader
摘要：Cocos Shader 在现代显卡中，若要正确地绘制物体，需要书写基于顶点（Vertex）和片元（Fragment）的代码片段，这些代码片段称为 Shader。在基于 OpenGL 系列驱动的硬件设备上，Shader 支持一种名为 GLSL（OpenGL Shading Language）的着色器 阅读全文
posted @ 2024-12-25 18:35 EricShx 阅读(33) 评论(0) 推荐(0)