首页 > 其他分享 >转:Shader入门教程实例-TheBookOfShaders For CocosCreator

转:Shader入门教程实例-TheBookOfShaders For CocosCreator

时间:2023-10-20 16:46:11浏览次数:38  
标签:返回 插值 入门教程 Shader TheBookOfShaders vec2 x2 x1

简介

The Book of Shaders》是一本关于片段着色器(Fragment Shader)的入门指南,由Patricio Gonzalez Vivo编写,从零开始讲述了如何通过Shader来完成图形图像的绘制。

本项目使用Cocos Creator 2.1.2实现了书中的大部分Shader示例,代码地址:[email protected]:foupwang/ShadersBookForCocosCreator.git。

代码中的Shader绑定逻辑使用了 @zxh19821 大大的ShaderHelper组件(地址:https://github.com/ShawnZhang2015/ShaderHelper2),感谢:)

GLSL内置函数

vec4 texture2D(sampler2D sampler, vec2 coord)

使用纹理坐标 coord,从当前绑定到 sampler 的二维纹理中读取相应的纹素。

radians(x)

将角度转化为弧度值,即 PI*x/180。

degrees(x)

将弧度值转化为角度,即 180*x/PI。

sin(x)

三角正弦函数,返回值区间为 [-1,1]。

cos(x)

三角余弦函数,返回值区间为 [-1,1]。

pow(x, n)

返回 x 的 n 次幂。

abs(x)

返回 x 的无符号绝对值。

sign(x)

如果 x>0 返回1.0,如果 x=0 返回0.0,否则返回 -1.0。

ceil(x)

对 x 向上取整。

floor(x)

对 x 向下取整。

mod(x, n)

取模,即 x 除以 n 的余数。

min(x1, x2)

返回 x1 和 x2 的较小值。

max(x1, x2)

返回 x1 和 x2 的较大值。

fract(x)

返回 x 的小数部分。

clamp(x, minVal, maxVal)

把 x 的值限制在 minVal 和 maxVal 之间,即返回 min(max(x,minVal),maxVal)。

mix(x, y, a)

返回 x 和 y 的线性混合,即 x(1-a)+ya

step(edge, x)

插值,根据两个数值生成阶梯函数,即 xsmoothstep(edge0, edge1, x)

插值,经过Hermite插值的阶梯函数。如果 x<=edge0 则返回 0.0,如果 x>=edge1 则返回 1.0,否则按照如下方法插值并返回

// genType is float/vec2/vec3/vec4
genType t;
t = clamp((x-edge0)/(edge1-edge0), 0, 1);
return t*t*(3-2*t);

length(x)

返回矢量x的长度

distance(p0, p1)

返回 p0 和 p1 之间的距离,即 length(p0-p1)

dot(x, y)

返回 x 和 y 的点积,对于 vec2 就是 x[0]y[0]+x[1]y[1]

cross(x, y)

返回 x 和 y 的叉积,对于 vec3 就是

result[0] = x[1]*y[2] - y[1]*x[2]
result[1] = x[2]*y[0] - y[2]*x[0]
result[2] = x[0]*y[1] - y[0]*x[1]

normalize(x)

对 x 进行归一化,保持矢量方向不变但长度为 1,即 x/length(x)

 

转至: https://forum.cocos.org/t/shader-thebookofshaders-for-cocoscreator/88602

标签:返回,插值,入门教程,Shader,TheBookOfShaders,vec2,x2,x1
From: https://www.cnblogs.com/pelephone/p/17777451.html

相关文章

  • Android入门教程 | RecyclerView使用入门
    想必大家对列表的表现形式已经不再陌生。手机上有联系人列表,文件列表,短信列表等等。本文讲述的是在Android开发中用RecyclerView来实现列表效果。使用步骤引入RecyclerView在app的build.gradle文件中添加引用。我们使用的是androidx包。gradle:dependencies{//........
  • Android入门教程 | DrawerLayout 侧滑栏
    DrawerLayout是实现了侧滑菜单效果的控件。DawerLayout分为侧边菜单和主内容区两部分:主内容区要放在侧边菜单前面,还有就是主内容区最好以DrawerLayout最好为界面的根布局,否则可能会出现触摸事件被屏蔽的问题。侧滑菜单部分的布局必须设置layout_gravity属性,表示侧滑菜单是在......
  • 【Python入门教程】CV2报错:cv2.error: OpenCV(4.7.0) D:\a\opencv-python\opencv-p
    ​     OpenCV作为一个强大计算机视觉库被各个领域广泛应用,今天分享下自己编程遇到的报错信息以及解决办法。1报错信息​[WARN:[email protected]]globalgrfmt_tiff.cpp:716cv::TiffDecoder::readDataOpenCVTIFF:TIFFRGBAImageOK:Sorry,cannothandleimageswith6......
  • Kafka 入门教程
     Kafka是分布式发布-订阅消息系统,它最初由LinkedIn公司开发,使用Scala语言编写,之后成为Apache项目的一部分。在Kafka集群中,没有“中心主节点”的概念,集群中所有的服务器都是对等的,因此,可以在不做任何配置的更改的情况下实现服务器的的添加与删除,同样的消息的生产者和消费者......
  • 【Unity3D】Shader Graph简介
    1ShaderGraph简介​ShaderGraph是Unity官方在2018年推出的Shader制作插件,是图形化的Shader制作工具,类似于Blender中的ShaderEditor和UE中的MaterialEditor,它使用流程图的形式表达顶点变换和片元着色的流程,通过节点(Node)的连接实现各种复杂的特效,关于节......
  • Android入门教程 | UI布局之RelativeLayout 相对布局
    RelativeLayout简述RelativeLayout继承于android.widget.ViewGroup,按照子元素之间的位置关系完成布局,作为Android系统五大布局中最灵活也是最常用的一种布局方式,非常适合于一些比较复杂的界面设计。RelativeLayout和LinearLayout类似,都是ViewGroup,能“容纳”多个子view。R......
  • UE4 compiling shader 0%(卡死)
    问题在笔者使用的UE4.27版本中,系统对于light和reflectioncapture的shadercompile总是停在0%,且看起来像是整个系统已经卡死的样子解决去Google看了下,发现需要更改引擎的配置文件,方式如下:找到位于你的UE引擎安装目录下的"UE_4.27\Engine\Config\ConsoleVariables.ini"文件,并......
  • 水面和水下效果Shader全解析
    本课程对水面效果以及水下效果都做了深入分析。 对于一款游戏来说,大世界场景中,湖泊,河流,池塘等都或多或少会做进游戏中作为场景中的一个元素,水面效果制作的逼真会给游戏带来很高的体验感,水面特效包含很多物理性质的计算,反射,折射,菲涅尔反射,等等;有的游戏还需要游戏玩家潜入水下......
  • Android入门教程 | ImageView 图片显示
    为了让App界面更美观生动,我们可以放上图片。显示图片是“刚需”。不论是书籍,报纸,网站,都有显示图片的需求。毕竟“无图无真相”。在Android应用开发中,我们通常使用ImageView来显示图片。ImageView的主要属性ImageView的使用ImageView经常用来显示图片。例如直接显示drawable里......
  • Makefile 入门教程
    Makefile是一个非常强大的构建自动化工具,用于管理项目的编译、链接和其他构建任务。以下是一个详细的Makefile使用文档,包括基本概念、语法、示例和常见任务。1.基本概念目标(Targets):在Makefile中,目标是要生成的文件或执行的操作的名称。目标可以是文件名,也可以是伪目标......