飞猪001-CSDN博客

原创 creator 流体初探

1.效果2.原理利用camera+物理碰撞体+shader合作制作效果（思路参考白玉无冰博客的欢乐水杯）。2.1 利用camera对流水的层级进行拍摄渲染到targetTexture。2.2 利用物理碰撞体进行模拟水的物理形态。2.3 利用shader进行对水的外部形态进行描绘在这里先挖个坑，在水的数量达到600以上的时候，帧率会急剧下降。看debug分析是碰撞体太多，导致cpu的压力过大。还有就是水的形态模拟效果不是特别满意。后续我会继续研究看看有什么好的解决方案。3.

2021-11-14 15:16:12 2528

原创 creator 反复横跳瞄准线的实现

1.效果2.原理对有反射功能的物体添加物理引擎的刚体与碰撞器，利用射线检查路线上面是否有对应的碰撞物体。有就对当前碰撞点。进行向量加法与点乘计算（具体计算公式请面向百度或者查看代码）来得到反射的向量。然后重复之前的操作。3.代码const { ccclass, property } = cc._decorator;@ccclassexport default class PhysicalLineModule extends cc.Component { ...

2021-11-14 12:37:15 2746 1

原创 cocos camera targetTexture应用之小地图与残影实现

1.效果2.原理残影与小地图原理是应用camera的属性targetTexture实现的，因为targetTexture是指定摄像机将拍摄到的东西渲染到指定的 RenderTexture上面，通过对指定的RenderTexture进行特殊处理来达到残影的效果。这么做的好处是如果我想要很多东西出现残影、只需要创建出残影的一组图片就能对多个物体进行统一的残影显示。3代码const {ccclass, property} = cc._decorator;@cccla...

2021-11-14 12:18:53 3422

原创 cocos shader 水面扭曲效果

1.效果2.原理利用噪声纹理对需要一个色值对需要扭曲的图片进行添加uv差值。利用effect的内置函数cc_time当时间线，来达到动态的效果。3.代码CCEffect %{ techniques: - passes: - vert: vs frag: fs blendState: targets: - blend: true rasterizerState: cu...

2021-11-14 09:18:33 829

原创 creator 学习之mask（刮刮卡效果）

1.效果2.原理 creator的刮刮卡是由mask的反向遮罩实现的，这是因为遮罩的内部功能是由画笔（graphics）实现的。利用遮罩的画笔功能将需要涂抹的地方进行修改达到刮刮卡的效果，至于百分比的判断我是利用了将整个图片分为n*m的各种在涂抹过程中判断格子的状态来达到涂抹百分比的判断3.代码const { ccclass, property } = cc._decorator;@ccclassexport default class MaskCardModule...

2021-11-07 21:58:07 623

原创 cocos shader 学习之流光

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: ...

2021-11-06 23:02:13 591

原创 cocos shader学习之手电筒光效

2021-11-06 22:15:26 384

原创 cocos shader 初探之马赛克

2021-11-06 14:17:51 223

原创 WEBGL学习之图片的显示

在webgl中显示图片，第一点需要注意图片的是像素必须是2的n次幂，第二点需要注意的是由于坐标系的不同需要将图片进行Y轴反转处理。剩下的显示流程与多顶点传入的流程基本一致。（Y轴反转->打开存储单元->绑定存储单元->配置纹理的参数->配置显示的图片与图片的参数->传递着色器）/** * 顶点着色器 */var VSHADER_SOURCE = 'attribute vec4 a_Position;\n' +//接收顶点坐标信息 '...

2021-11-06 13:19:57 699

原创 WEBGL学习之三角形的旋转、平移、缩放

/** * 顶点着色器 */var VSHADER_SOURCE = 'attribute vec4 a_Position;\n'+//接收顶点坐标信息'attribute vec4 a_Color;\n'+//接收顶点颜色信息'uniform mat4 u_xformMatrix;\n'+//接收模型矩阵'varying vec4 v_Color;\n'+//内插颜色信息'void main() {\n'+'gl_Position = u_xformMatrix * a_Positi.

2021-10-31 16:39:28 234

原创 WEBGL学习笔记记录之画三角形

/** * 顶点着色器定义一个vec4变量接受顶点信息 */var VSHADER_SOURCE = 'attribute vec4 a_Position;\n'+'void main() {\n'+'gl_Position = a_Position;\n'+'}\n'/** * 片元着色器默认返回颜色 */var FSHEADER_SOURCES = 'void main() {\n'+'gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n'.

2021-10-31 10:27:15 70

原创 webgl学习之认识webgl

1.什么是webgl webgl是一项用来在网页上面绘制和渲染复杂三维图形，并允许用户与之进行交互的技术。它实际上是从opengl的一个特殊版本OpenGL ES 2.0中派生出来的。关系见下图（摘自WebGL 编程指南）webgl包含了三种语言。HTML5（超文本标记语言）、JavaScript和GLSL ES。下图展示了传统网页（左侧）和webgl网页（右侧）的软件结构。2.如何利用webgl绘制一个点...

2021-10-25 23:32:48 887

m0_63275099的博客