Cocos Shader总结

最新推荐文章于 2024-08-15 17:20:34 发布
最新推荐文章于 2024-08-15 17:20:34 发布
阅读量889 收藏 1
点赞数
分类专栏： cocos
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kavenGw/article/details/52280038
版权

在弄cocos记录的笔记，虽然和unity有点区别，但核心思想还是一样

fsh

fsh是片段shader。在这里对于每一个像素点进行重新计算。

varying highp vec2 textureCoordinate就是从vsh中传过来了纹理坐标

uniform sample2D videoFrame是我们真正的纹理贴图

texture2D(videoFrame,textureCoordinate)
将纹理中的每个像素取出

然后就可以重新加工

gl_fragcolor是内置的系统变量，定义最终画在屏幕上的像素点的颜色

vsh

vsh是vertex shader ，用于顶点计算，可以理解控制定点的位置，在这个文件中我们通常会传入顶点的位置，和纹理的坐标。

每个shader都有一个main函数。
这里面有两种类型的变量，
一种是attribute,另一种是varying

attribute是从外部传进来的，每一个顶点都会有这两个属性，所以他也叫作vertex attribute顶点属性。

varying类型的变量是在vertex shader和fragment shader之间传递数据。

gl_开头的变量名是系统内置的变量。

precision mediump float定义中等精读的浮点数

uniform外部传入vsh文件的变量 变化率较低 对于可能在整个渲染没有改变 只是个常亮

在main中当overturn大于0的时候，函数里就是将纹理y反转

vertex shader是作用于每一个顶点的。如果有3个定点，那么vertex shader会被执行三次

研究了3天，终于将 Shader 移植到 Cocos Creator 2.2.0 上了
奎特尔星球
10-24 1218
01预览 扫光特效—Fluxay2 马赛克像素特效—Mosaic 过渡效果—Transfer Shawn 花了3天时间，研究了Cocos Creator 2.2.0 的 Effect 语法，终于在1024节前夕，大概知道如何将 2.1.3 的 Shader 特效给移植过去，成功移植了上面几个 Effect 文件，下面我讲一下关键要点，相信你可以自行完成。 ...
Cocos Creator Shader工具
游蓝海 的专栏
10-08 4120
十一就这样过去了，没什么大成就，但还是写个总结吧。前几天用Cocos Creator写一个demo，涉及到了shader开发，而cocos一直没有好用的shader工具，就心血来潮要自己开发一个。花了两天时间，模拟Unity Shader完成了一套基本的材质框架，由于不知道怎么扩展编辑器，就没写工具，后面等Cocos Creator的编辑器扩展功能更完善一些再说。源码已经放到github了
深度剖析Cocos Creator中的Shader编程：从入门到精通，打造绚丽视觉效果！
最新发布
阿拉丁Mr的博客
08-15 1448
通过本文的详细讲解，相信你已经对Cocos Creator中的Shader编程有了初步的认识和了解。Shader编程是一门既有趣又充满挑战的技术，它能够让你的游戏和应用在视觉上脱颖而出。希望你在未来的开发过程中，能够灵活运用Shader编程，创造出更多令人惊叹的视觉效果！
【ShaderToy中图形效果转译到UnityShaderlab系列案例分享】
暴走约伯的博客
05-14 420
【ShaderToy中图形效果转译到UnityShaderlab案例分享_Yin Yang】
保姆级教程！如何将一个 Shader 迅速移植到 Cocos Creator？
Cocos的博客
07-28 473
效果展示‍时常有人问我怎么学习shader，其实白玉无冰学的也很浅，推荐几个曾经用过的在线学习网站。https://thebookofshaders.com/https://webglfundamentals.orghttps://learnopengl-cn.github.io/里面有自带环境编辑，在线编写代码，边学边做。了解了一些概念（顶点着色器/片元着色器/uniform/glsl 语法/内...
cocos creator shader用法
丶祁寒的专栏
06-14 8787
var nativeVertShader = "attribute vec4 a_position;\n" + "attribute vec2 a_texCoord;\n" + "attribute vec4 a_color;\n" + "varying vec4 v_fragm
cocos shader 学习之流光
m0_63275099的博客
11-06 640
1.效果 2.原理 （已知点击的中心点p，与穿过p点的线l，并且与x轴的角度）利用三角函数先找到p点与x轴相交的点a的x坐标。在沿着uv画一条平行于x轴的线于l相交于d点，求d点的x坐标。然后求出uv->d点的距离，利用三角函数在求出过uv点于线l正交的距离。 3.代码 // Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd. CCEffect %{ techniques: - passes: ...
cocos creator 1.9.3 用Shader实现聚光灯效果
03-18
总结来说，"cocos creator 1.9.3 用Shader实现聚光灯效果"是一个利用自定义Shader在Cocos Creator旧版本中创建聚光灯效果的例子。通过理解Shader的工作原理和编写GLSL代码，开发者可以实现更多创意视觉效果。而在...
cocos2dx替换颜色shader（把紫色替换成灰色）
01-14
总结一下，本教程介绍了如何在Cocos2d-x中使用Shader进行颜色替换，特别是在一个简单的示例中，我们将紫色替换为灰色。理解并熟练运用Shader，能够帮助开发者实现更复杂、更高效的图形效果，提升游戏的视觉体验。...
cocos creater +js shader 实现搓牌效果，cocoscreater 版本1.9.3
03-21
总结来说，实现搓牌效果需要对Cocos Creator的工作原理、JavaScript编程和Shader技术有深入的理解。通过灵活运用这些知识，你可以创造出各种令人印象深刻的视觉特效，增强游戏的吸引力。在实践中不断探索和学习，你...
超牛逼~外发光shader
10-09
总结来说，"超牛逼~外发光shader"涉及到Unity中的Shader编程，特别是关于如何实现3D模型的外发光效果。这需要对Unity的渲染管道、表面着色器、Shader Graph以及可能的后处理技术有深入理解。通过自定义代码和条件...
用于cocoscreator的shader工具
08-12
用于cocos creator的shader工具，支持类似于Unity3D Shader语法
玉兔视频 | Unity Shader 和 Cocos Shader 对比，方便各位大佬入坑
奎特尔星球
10-10 429
Unity 开发者 10 分钟上手 Cocos Shader，玉兔小姐姐视频教程新鲜出锅，清香四溢哟！玉兔从Unity 和Cocos Creator两个引擎编辑器界面开始，手把手介绍，如何创建模型材质。这个，基本上就是一样的啦！然后又逐行讲解内置 Shader 模板 builtin-unlit Shader 在语法规则上， Unity Shader 与 Cocos Effect 又是怎么一一...
Cocos技术派 | 导入FBX模型实现真3d效果
热门推荐
大掌教的Cocos Creator研究院
05-31 1万+
抢鲜品尝Cocos Creator憋了半年之久的3D功能部分，导入一个简单的FBX模型实现真3d效果。
干货分享: Unity 3D模型如何导给Cocos Creator使用
voidinit的专栏
07-30 2431
越来越多的Cocos小伙伴开始做独立3D小游戏了，无奈自己不会3D美术，3D模型太少，免费的模型不成套，一些游戏资源大部分都是Unity的，导入Cocos Creator要么没有动画，要么各种错误，今天给大家分享一些干货，Unity的3D模型导入Cocos Creator 3.x的几个技巧和方法。 这里有个cocos/unity学习交流小组点击可以直接加入，一起学习交流吧 1: 获取Unity 模型资源的主要途径与面临问题 获取Unity模型资源主要分成几大类，第1类是可以从Unity项目里面获取资源
CocosCreator之粒子导入
码之有道
09-16 1181
粒子资源（ParticleSystem） 导入粒子资源 将 Cocos2d 支持的粒子.plist文件直接放到工程资源目录下。 在场景中添加粒子系统 方法一，从资源管理器里将粒子资源直接拖到层级管理器： 方法二，从资源管理器里将粒子资源直接拖到场景编辑器： 方法三，在已有节点上添加一个粒子系统（ParticleSystem）组件，从资源管理器里将粒子资源直接赋给组件的File属性： 注意：不支持.plist文件中的 sourcePosition ...
从Unity到CocosCreator（一）
方寸想法，编码宇宙
04-12 4446
一、脚本的生命周期回调 Cocos Creator 为组件脚本提供了生命周期的回调函数。用户只要定义特定的回调函数，Creator 就会在特定的时期自动执行相关脚本，用户不需要手工调用它们。 onLoad（Unity是Awake） 组件脚本的初始化阶段，我们提供了onLoad回调函数。onLoad回调会在节点首次激活时触发，比如所在的场景被载入，或者所在节点被激活的情况下。 在o...
Cocos Creator Shader与材质
voidinit的专栏
08-23 5556
Cocos creator 2.1以后引入了3D渲染的底层，所以引入了Shader和材质系统，比如精灵,下面有一个材质, 材质又选了一个Shader; 给大家推荐一个cocoscreator学习+交流705182843 1: 什么是Shader和材质? Shader是一种给显卡GPU执行的程序, 是一种绘制算法，显卡的渲染流水线加载Shader代码后，就能够在绘制的时候执...
cocos shader
08-16
Cocos Shader是Cocos引擎中用于实现自定义渲染效果的功能。它基于OpenGL ES 2.0或OpenGL ES 3.0，并且可以在2D和3D场景中使用。 使用Cocos Shader，您可以创建各种独特的效果，如阴影、扭曲、发光等等。您可以通过编写GLSL（OpenGL Shading Language）代码来定义着色器程序，然后将其与Cocos引擎中的节点进行关联。 要使用Cocos Shader，首先需要创建一个自定义的Shader文件，然后在Cocos引擎中加载并应用它。您可以使用Cocos Creator编辑器或手动编写代码来实现这一点。 以下是一个简单的示例代码，展示了如何在Cocos Creator中使用Cocos Shader： ```javascript // 创建一个Sprite节点 var spriteNode = new cc.Node(); var sprite = spriteNode.addComponent(cc.Sprite); sprite.spriteFrame = new cc.SpriteFrame("path/to/your/image.png"); // 加载并应用Shader cc.loader.loadRes("path/to/your/shader", cc.RawAsset, function (err, shaderCode) { if (err) { cc.error(err.message || err); return; } // 创建自定义材质 var material = new cc.Material(); material.effectAsset = shaderCode; material.name = 'CustomShader'; // 将材质应用到Sprite节点上 sprite.setMaterial(0, material); }); ``` 在上述示例中，您需要将路径 "path/to/your/image.png" 替换为您的图像文件路径，将路径 "path/to/your/shader" 替换为您的Shader文件路径。 请注意，使用Cocos Shader需要对OpenGL ES和GLSL有一定的了解。如果您不熟悉这些概念，建议先学习相关知识。同时，Cocos官方提供了丰富的文档和示例代码，可供参考和学习。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值