【Cocos Creator 3.x】ShaderToy 中的 iTime 对应 Cocos Effect 中是什么？

已于 2022-08-19 15:50:13 修改
阅读量814 收藏
点赞数
分类专栏： cocos creator Shader 文章标签： cocos-creator
于 2022-08-16 19:12:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014206745/article/details/126372340
版权

前言
在网上 ShaderToy 中找了很久的一个 Shader 效果，不知道怎么移至到 Cocos Creator 中。

介绍
ShaderToy 中的 iTime 是 Shader 着色器播放时间（单位为：秒）。
请添加图片描述
那么对应到 Cocos Creator 中的 Effect 是啥呢？

其中，在 Creator 引擎中内置的 cc-global.chunk 中有 cc_time ， cc_ time.x 代表从开始运行以来的全局事件（单位为：秒），cc_time.y 代表当前帧的 delta 时间，cc_time.z 代表从开始运行以来的总帧数。
请添加图片描述
可以得知， iTime 可以使用 cc_time.x 代替。

如何使用？
在需要引用 cc_time 的着色器片段，引入 cc-global.chunck。

#include <cc-global>

可以参考的代码：
https://gitee.com/yeshao2069/cocos-creator-shader/blob/v3.5.x/demo/2d/Creator3.5.1_2D_LoopTunnel/assets/res/Loop.effect

木限东
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用 Cocos Creator 做一个物理画线游戏！支持 UGC 关卡创作和微信关卡分享
Cocos的博客
11-23 986
引言：在 3D 跑酷游戏和 3D 三消游戏之后，本次孙二喵带来了一个 2D 物理画线游戏源码，使用 Cocos Creator 3.6.2 开发。源码见文末。演示效果物理画线是一种比较经典的 2D 游戏玩法，这几年也出了一系列的爆款产品。本文将从立项、游戏逻辑和具体功能点的实现，来讲解如何基于 Cocos Creator 3.x 开发一款物理画线游戏，并实现 UGC 关卡创作和微信关卡分享。立项与...
Creator3D:shader2_变色小球
carlos13207的博客
08-22 886
Creator3D:基础2_一起学shader_变色小球 前言 在上一篇《Creator3D:基础1_一起学shader_红色小球 》中简单讲了怎样在effect中给小球上色，有了这个基础，咱们是不是可以考虑让他的颜色变化起来 效果展示 正文 1.文档资料 YAML 101 Effect 语法 Pass 可选配置参数 常用 shader 内置 Uniform 文档是必须要读的，哪怕你是和我一下的小白，第一次不要求看懂，但是最好过一遍，有个印象，方便后边回过头来查找 2.变色（cc_time） 要让颜色动起
ShaderToy的使用方法
averagePerson的博客
07-15 1031
大概就是这样{//这个uv，不是归一化的形式，需要手动归一化纹理坐标到[0-1]范围//根据时间变量iTime与纹理坐标组合作为入参计算像素颜色//输出颜色到fragColor，只需要给该变量赋值就可以展示在最终渲染效果上}...............
cocos2d-x获取系统时间
热门推荐
jinjian2009的专栏
07-24 1万+
本文提供了cocos2d-x上获取毫秒级时间的方法，同样也提供了获取本地时间年月日时分秒的方法。 对于cocos2d-x高版本（比如2.1.3等某些版本）在win32平台下获取年月日时分秒的方法可能遇到的错误情况进行了分析，以及提供了解决办法。
CocosCreator全局扫光
洋小葱的博客
05-26 891
效果预览 按钮或物体上出现扫光效果可以体现改物品的珍贵性，比如我们在SSR卡片或者付费按钮上加一个扫光效果可以增加玩家付费的欲望，而这个效果要是美术去做的话，需要大量序列帧，而用shader可以轻松的定制出各种各样的效果。 核心思路 让2条斜率相同的斜线中间夹住的部分变亮，并让这两条线保持相同的速度进行位移。然后周期回归到原点重新扫一遍。 实现过程 本demo是基于ccc2.4.8开发的。 首先我们先画一条线出来，斜率的方程是：y=k*x+b 我们只需要让2个斜线中间的区域变亮一点就可以了
cocos creator 流光特效（参考shadertoy效果）
lck8989的博客
12-26 3898
有兴趣的可以去官网：shadertoy官网 流光特效代码： // Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd. CCEffect %{ techniques: - passes: - vert: vs frag: fs blendState: targets: ...
Cocos Creator 3.x 中使用 Socket.io
10-10
Cocos Creator 3.x 中使用 Socket.io Cocos Creator 3.x 中使用 Socket.io 文档地址：https://blog.csdn.net/nicepainkiller/article/details/127239678 文档地址：...
CocosCreator3.x实现游戏跑马灯全服游戏通知功能
02-18
CocosCreator3.x实现游戏跑马灯全服游戏通知功能 1、实现游戏跑马灯效果 2、支持新增消息自动显示播放并自动移除； 3、使用CocosCreator3.8.2目前最新引擎编写
Cocos Creator 3.x拖尾效果.zip
09-08
在Cocos Creator 3.x中实现拖尾效果是一项常见的视觉特效技术，它可以为游戏或应用增添动态美感。本文将深入探讨如何在Cocos Creator 3.x中创建和优化拖尾效果，以及涉及到的相关知识点。 首先，理解Cocos Creator ...
基于 Cocos Creator 3.x 版本开发的游戏框架
最新发布
03-08
基于 Cocos Creator 3.x 版本开发的游戏框架，此项目为 Oops Framework 教程项目，如果使用框架制作游戏项目可下载 oops-game-kit 游戏项目模板开发。
CocosCreator Shader Editor 2D/3D 特效编辑器
ihc523的专栏
01-01 3348
一款同时支持 Shader 2D&&3D 特效的编辑器插件， 支持节点预览，支持2D/3D即时切换。支持最新版本 CocosCreator (v3.4.x)
CocosCreator实现划过的位置显示纹理
大猪的博客
05-19 830
1、项目需求 项目需要有一个功能：是当一个光点走过的路径，这个路径的位置就都亮起来的功能。 2、资料内容 功能类似这位大神的橡皮擦功能：https://forum.cocos.org/t/2-0-8/74246 但是，项目的需求还要经过的路径周围有模糊的外边——也就是从中心到边缘越来越暗。 所以对于借鉴了网上大神的shader例子，做了一些改动，来实现项目的需求。类似以下的示例： 3、项目示例 以下是我自己的测试项目的示例： ...
光影的魔法！Cocos Creator 实现屏幕空间的环境光遮蔽(SSAO)
wubaohu1314的博客
10-14 984
引言：本文作者 alpha 从事游戏前端开发已经5年，毕业后他先是入职了腾讯无线大连研发中心，而后开启了北漂生涯，在北京的这3年一直都在使用 Cocos Creator，对前端业务，包体、内存优化有很多的实践经验。最近 alpha 在学习计算机图形学相关技术，今天他将同大家分享 Cocos Creator 3.3 实现屏幕空间的环境光遮蔽(SSAO)的技术经验。什么是 AO ?环境光(Ambient Lighting)是场景总体光照中的一个固定光照常量，用来模拟光的散射(Scattering)。在现实中，光
CocosCreator2.4 Shader学习
SlowFeather's blog
11-13 2933
CocosCreator2.4 Shader学习模板面板源码 模板 路径 不同版本就进入不同版本的路径 D:\CocosDashboard_1.0.9\resources.editors\Creator\2.4.6\resources\engine\cocos2d\renderer\build\chunks 在input-standard.inc中 想要拿到什么参数可以从这里复制 面板 源码 // Copyright (c) 2017-2018 Xiamen Yaji Software Co., Lt
Shadertoy_入门基础
qq_35312463的博客
07-03 1446
https://www.shadertoy.com/ 一、基本变量 uniform vec3 iResolution; // 窗口分辨率，单位像素 uniform float iTime; // 程序运行的时间，单位秒 uniform float iTimeDelta; // 渲染时间，单位秒 uniform int iFrame; // 帧率 uniform float iChannelTime[4];
教程｜手把手教你在Cocos Creator中使用Shader
Cocos的博客
07-19 488
感谢『简书ID： 曾彬思』友情提供http://www.jianshu.com/p/d2475a837fc6由于Cocos Creator从v1.5版本就开始支持ES2015和TypeScript语法，所以我们的组件以ES2015的语法编写。（目前Creator还没有为Shader提供内置的特效组件，或者针对Creator Shader专门提供一些API，所以首先应该想到的是通过Cocos2d-...
cocos shader 用到的数学 抛物线,直线方程篇
lck8989的博客
10-13 783
在抛物线y^2= -2px 中，焦点是( -p/2，0），准线的方程是x=p/2，离心率e=1，范围：x≤0。在抛物线x^2=2py 中，焦点是（0，p/2），准线的方程是y= -p/2,离心率e=1，范围：y≥0。在抛物线x^2= -2py中，焦点是（0，-p/2），准线的方程是y=p/2，离心率e=1，范围：y≤0。在抛物线y^2=2px中，焦点是(p/2，0），准线的方程是x= -p/2，离心率e=1，范围：x≥0。几乎适用于任何曲线,但是有些例外。说明切圆锥的时候是连着的切的。
【Cocos Creator 3.x】ShaderToy 中的 iResolution 对应 CocosEffect 中什么？
u014206745的博客
12-02 788
1分钟快速学习 ShaderToy 中的 iResolution 的替代方法。
creator shader:从零开始，做个电视机雪花噪声动画
k569462166的博客
08-18 510
从零开始的标题只是用惯了，下面的代码需要实验的话，请确保之前真正的从零开始的帖子你能看明白或者你已经联系过。 上效果 动画减帧了，不然太大。 shader的随机函数 这个是之前上过的随机函数。 先上一个随机函数，用 o.xyz = vec3(hashOld12(uv));，用uv生成一个随机值并填入gl_FragColor.rgb生成看一下，一个无规则的噪声图。用这个函数的功能就是从uv生成随机数 但是这是用数学计算出的伪随机数，效果是对不同uv出来的值是随机的，但是对固定uv随机，每次随机的结果也是固定
cocos creator3.x 中如何使用SpriteFrameCache
06-10
在Cocos Creator 3.x中，可以使用SpriteFrameCache来预加载纹理资源，并在游戏中直接使用缓存中的SpriteFrame来更新纹理。使用SpriteFrameCache的步骤如下： 1. 在游戏启动时，预加载纹理资源到SpriteFrameCache中。可以使用cc.assetManager.loadBundle或cc.resources.load等API来加载纹理资源，然后在加载完成后，使用cc.SpriteFrame.createWithTexture将纹理转换成SpriteFrame，并添加到SpriteFrameCache中。 示例代码如下： ``` cc.assetManager.loadBundle('textures', function (err, bundle) { bundle.load('texture1', cc.Texture2D, function (err, texture) { var spriteFrame = cc.SpriteFrame.createWithTexture(texture); cc.spriteFrameCache.addSpriteFrame(spriteFrame, 'texture1'); }); }); ``` 2. 在游戏中，直接使用SpriteFrameCache中的SpriteFrame来更新纹理。可以使用cc.Sprite组件的spriteFrame属性来设置SpriteFrame，从而更新纹理。 示例代码如下： ``` var sprite = node.getComponent(cc.Sprite); var spriteFrame = cc.spriteFrameCache.getSpriteFrame('texture1'); sprite.spriteFrame = spriteFrame; ``` 需要注意的是，Cocos Creator 3.x中的cc.SpriteFrameCache与Cocos2d-x中的cc.SpriteFrameCache有所不同，Cocos Creator 3.x中的cc.SpriteFrameCache只能存储SpriteFrame，而不能存储纹理。因此，在调用cc.SpriteFrame.createWithTexture时，需要将纹理转换成SpriteFrame。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值