Cocos Creator 3.8.x 后效处理（前向渲染）

news2024/7/4 3:34:44

关于怎么开启后效效果我这里不再赘述，可以前往Cocos官方文档查看具体细节：后效处理官网

下面讲一下怎么自己定义一个后处理效果，想添加自己的后效处理的话只需要在postProcess节点下添加一个BlitScreen 组件即可，然后自己去添加自己想要的材质，官方说 简单的后效可以直接将后效材质添加到 Blit-Screen 后效组件 上，复杂的后效需要自定义一个后效 pass ，但是我觉得这种方式搞的后处理效果就可以很炸裂。

1：模拟下雨雨滴掉到水面上的效果

首先创建一个shader文件，关键是这个shader文件在哪里下载呢，你可以复制一个内置的后效文件，然后在它的基础上做一下修改，比如我复制 internal/effects/pipeline/post-process/blit-screen.effect文件到自己的项目文件夹里面，但是它还依赖了一个chun文件，这时候我直接将chunk文件也直接复制过来使用，放到我自己的shaders文件夹：稍作修改：

a: 创建shader文件
// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.

CCEffect %{
  techniques:
  - passes:
    - vert: vs
      frag: fs
      pass: post-process
      rasterizerState:
        cullMode: none
      depthStencilState:
        depthTest: false
        depthWrite: false
      blendState:
        targets:
        - blend: true
          blendSrc: one
          blendDst: one_minus_src_alpha
          blendSrcAlpha: one
          blendDstAlpha: zero
      properties:
        color: {value: [1.0,1.0,1.0,0.5],editor: {type: color}}
}%


CCProgram vs %{
  /* 这个vs就是 我复制不来的chunk 放到shaders文件夹了 */
  #include <./vs>
  
}%


CCProgram fs %{
  /** 想要使用cc_time变量需要引入这个文件 */
  #include <builtin/uniforms/cc-global>
  precision highp float;
  // Maximum number of cells a ripple can cross.
  #define MAX_RADIUS 1

  // Set to 1 to hash twice. Slower, but less patterns.
  #define DOUBLE_HASH 0

  // Hash functions shamefully stolen from:
  // https://www.shadertoy.com/view/4djSRW
  #define HASHSCALE1 .1031
  #define HASHSCALE3 vec3(.1031, .1030, .0973)

  

  float hash12(vec2 p)
  {
    vec3 p3  = fract(vec3(p.xyx) * HASHSCALE1);
    p3 += dot(p3, p3.yzx + 19.19);
    return fract((p3.x + p3.y) * p3.z);
  }


  vec2 hash22(vec2 p)
  {
    vec3 p3 = fract(vec3(p.xyx) * HASHSCALE3);
    p3 += dot(p3, p3.yzx+19.19);
    return fract((p3.xx+p3.yz)*p3.zy);
  }
  in vec2 v_uv;

  uniform UBO {
    vec4 inputViewPort;
    vec4 color;
  };
  #pragma rate inputTexture pass
  uniform sampler2D inputTexture;

  layout(location = 0) out vec4 fragColor;

  vec3 rain()
  {
    vec2 uv = v_uv;
    uv *= 5.;
      vec2 p0 = floor(uv);

      vec4 time = cc_time;
      vec2 resolution = cc_screenSize.xy;

      vec2 circles = vec2(0.);
      for (int j = -MAX_RADIUS; j <= MAX_RADIUS; ++j)
      {
          for (int i = -MAX_RADIUS; i <= MAX_RADIUS; ++i)
          {
        vec2 pi = p0 + vec2(i, j);
              #if DOUBLE_HASH
              vec2 hsh = hash22(pi);
              #else
              vec2 hsh = pi;
              #endif
              vec2 p = pi + hash22(hsh);

              float t = fract(0.3*time.x + hash12(hsh));
              vec2 v = p - uv;
              float d = length(v) - (float(MAX_RADIUS) + 1.)*t;

              float h = 1e-3;
              float d1 = d - h;
              float d2 = d + h;
              float p1 = sin(40.*d1) * smoothstep(-0.6, -0.3, d1) * smoothstep(0., -0.3, d1);
              float p2 = sin(40.*d2) * smoothstep(-0.6, -0.3, d2) * smoothstep(0., -0.3, d2);
              circles += 0.1 * normalize(v) * ((p2 - p1) / (2. * h) * (1. - t) * (1. - t));
          }
      }
      circles /= float((MAX_RADIUS*2+1)*(MAX_RADIUS*2+1));

      float intensity = mix(0.01, 0.1, smoothstep(0.1, 0.6, abs(fract(0.05*time.x + 0.5)*2.-1.)));
      vec3 n = vec3(circles, sqrt(1. - dot(circles, circles)));
      vec3 color1 = texture(inputTexture, uv/resolution - intensity*n.xy).rgb + 5.*pow(clamp(dot(n, normalize(vec3(1., 0.7, 0.5))), 0., 1.), 6.);
    return color1.xyz;
  }

  void main () {
    fragColor = texture(inputTexture, v_uv);
    vec3 destColor = rain();
    fragColor.rgb = mix(fragColor.rgb,destColor,color.a);
  }

}%

然后创建一个材质，effect使用上面的shader文件 取名叫做rain

b: 把材质放到BlitScreen上的材质插槽

这个时候已经可以在编辑器中看到效果了。当然这个BlitScreen是一个数组，你可以在创建一个材质来再做一个效果出来，因为它是一个数组

2：模拟炸裂技能的效果

跟上一个shader文件类似，你可以在创建一个shader文件，你可以同样复制上一个shader文件

只是里面的视线变了而已，

a： 创建shader文件 ele.effect:
// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.

CCEffect %{
  techniques:
  - passes:
    - vert: vs
      frag: fs
      pass: post-process
      rasterizerState:
        cullMode: none
      depthStencilState:
        depthTest: false
        depthWrite: false
      blendState:
        targets:
        - blend: true
          blendSrc: one
          blendDst: one_minus_src_alpha
          blendSrcAlpha: one
          blendDstAlpha: zero
      properties:
        color: {value: [1.0,1.0,1.0,0.5],editor: {type: color}}
}%


CCProgram vs %{
  #include <./vs>
  
}%


CCProgram fs %{
  #include <builtin/uniforms/cc-global>
  precision highp float;
  
  in vec2 v_uv;

  uniform UBO {
    vec4 inputViewPort;
    vec4 color;
  };
  #pragma rate inputTexture pass
  uniform sampler2D inputTexture;

  layout(location = 0) out vec4 fragColor;

  const float PI = 3.14159265359;


float random(float p){
  	return fract(sin(p) * 10000.0);
} 
  
float noise(vec2 p){
	float t = cc_time.x / 2000.0;
    if(t > 1.0) t -= floor(t);
    return random(p.x * 14. + p.y * sin(t) * 0.5);
}

vec2 sw(vec2 p){
  	return vec2(floor(p.x), floor(p.y));
}
  
vec2 se(vec2 p){
  	return vec2(ceil(p.x), floor(p.y));
}
  
vec2 nw(vec2 p){
  	return vec2(floor(p.x), ceil(p.y));
}
  
vec2 ne(vec2 p){
  	return vec2(ceil(p.x), ceil(p.y));
}

float smoothNoise(vec2 p){
  	vec2 inter = smoothstep(0.0, 1.0, fract(p));
  	float s = mix(noise(sw(p)), noise(se(p)), inter.x);
  	float n = mix(noise(nw(p)), noise(ne(p)), inter.x);
    return mix(s, n, inter.y);
}

mat2 rotate (in float theta){
  	float c = cos(theta);
  	float s = sin(theta);
    return mat2(c, -s, s, c);
}

float circ(vec2 p){
	float r = length(p);
  // return r;
  // 防止线性变化
	r = log(sqrt(r));
  float intensity = 7.;
  // 周期性出现
	return abs(sin(.8 * r + PI * 4.0)) * 7. + 0.2;
}

float fbm(in vec2 p){
	float z = 2.0;
  // 每层噪声贡献的结果总和
    float rz = 0.0;
    vec2 bp = p;
    // 用于生成5层不同频率的噪声
    for(float i = 1.0; i < 6.0; i++) {
      // 随着 z 的增加，每层噪声的影响减少，模拟了自然界中细节随观察距离增加而减少的现象
    	rz += abs((smoothNoise(p) - 0.5)* 2.0) / z;
        // 振幅衰减
        z *= 2.0;
        // 频率加倍。通过将 p 加倍，实际上是在增加噪声的频率，使得每一层的噪声比上一层更“紧密”，这样就能在最终的噪声图案中创造出更多的细节。
        p *= 2.0;
    }
    return rz;
}

vec3 ele()
{
  vec2 uv = v_uv;
  // uv *= .5;
    vec2 p = uv - 0.5;
    vec2 resolution = cc_screenSize.xy;
    p.x *= resolution.x / resolution.y;
    p *= 10.;
    float rz = fbm(p);
    p /= exp(mod(cc_time.x * 2.0, PI));
    rz *= pow(abs(0.1 - circ(p)), 0.9);
    vec3 col = vec3(0.2, 0.1, 0.643);
    return col / rz;
}

  void main () {
    fragColor = texture(inputTexture, v_uv);
    vec3 destColor = ele();
    fragColor.rgb = mix(fragColor.rgb,destColor,color.a);
  }

}%
b: 创建材质文件 ele.mtl,并且放到BlitScreen中

是不是相当的炸裂

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1482685.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

ElasticSearch搜索引擎使用指南

ElasticSearch搜索引擎使用指南

一、ES数据基础类型 1、数据类型 字符串 主要包括: text和keyword两种类型&#xff0c;keyword代表精确值不会参与分词&#xff0c;text类型的字符串会参与分词处理 数值 包括: long, integer, short, byte, double, float 布尔值 boolean 时间 date 数组 数组类型不…
阅读更多...
div在vue的组件之中如何设置这个字体的颜色和样式大小

div在vue的组件之中如何设置这个字体的颜色和样式大小

在Vue组件中设置<div>的字体颜色和样式大小可以通过两种主要方式实现&#xff1a;通过内联样式&#xff08;inline styles&#xff09;或者通过CSS类&#xff08;CSS classes&#xff09;。 使用内联样式 在Vue模板中直接在元素上使用style属性来设置样式。这种方法适用…
阅读更多...
2024年春招小红书前端实习面试题分享

2024年春招小红书前端实习面试题分享

文章目录 导文面试重点一、方便介绍一下&#xff0c;你之前实习都做了什么嘛&#xff1f;二、 可以讲一下封装组件相关逻辑嘛&#xff1f;1. 为什么要封装组件&#xff1f;2. 封装组件的步骤3. 封装组件的原则4. 组件的复用和扩展5. 组件的维护和文档 三、项目的性能优化你有什…
阅读更多...
Apache Echarts介绍与入门

Apache Echarts介绍与入门

介绍 Apache ECharts 是一款基于 Javascript 的数据可视化图表库&#xff0c;提供直观&#xff0c;生动&#xff0c;可交互&#xff0c;可个性化定制的数据可视化图表。 官网地址&#xff1a;https://echarts.apache.org/zh/index.html 入门案例 Apache Echarts官方提供的快…
阅读更多...
大数据智能化-长视频领域

大数据智能化-长视频领域

随着数字化时代的到来&#xff0c;长视频领域的发展迎来了新的机遇和挑战。在这一背景下&#xff0c;大数据智能化技术的应用成为长视频行业提升用户体验、优化运营管理的重要手段之一。本文将从优爱腾3大长视频背景需求出发&#xff0c;分析静态资源CDN、视频文件存储与分发、…
阅读更多...
midjourney提示词语法

midjourney提示词语法

更高级的提示可以包括一个或多个图像URL、多个文本短语和一个或更多个参数 Image Prompts 可以将图像URL添加到提示中&#xff0c;以影响最终结果的样式和内容。图像URL总是位于提示的前面。 https://docs.midjourney.com/image-prompts Text Prompt 要生成的图像的文本描述。…
阅读更多...
[法规规划]国家数据局局长刘烈宏《激活数据要素价值》演讲要点解析

[法规规划]国家数据局局长刘烈宏《激活数据要素价值》演讲要点解析

国家数据局党组书记、局长刘烈宏在北大光华论坛上发表了题为《激活数据要素价值》的演讲&#xff0c;当时曾极大推动了市场热度&#xff0c;引发了行业思考。现在演讲过去了一段时间&#xff0c;但是温故而知新&#xff0c;我们不妨结合演讲之后的市场反应&#xff0c;回顾一下…
阅读更多...
Redis的主从搭建

Redis的主从搭建

1.准备两台机器&#xff0c;安装好redis 2.修改从服务器的redis配置 slaveof <masterip> <masterport>两个参数 masterip 主的ip 主的端口号 masterport 3. 启动redis 1.先启动主机redis 2.再启用从机redis 主机redis日志打印 从机redis 日志打印
阅读更多...
有序数组二分查找

有序数组二分查找

#include <stdio.h>//二分查找 int binary_search(int arr[],int k,int n){int low 0;int high n - 1;int mid 0;while(low < high){mid (low high) / 2;if(arr[mid] > k)high mid - 1;else if(arr[mid] < k)low mid 1;else return mid;}if(low > hi…
阅读更多...
Tomcat服务部署、优化

Tomcat服务部署、优化

一 Tomcat的基本介绍 Tomcat概念 Tomcat 服务器是一个免费的开放源代码的Web 应用服务器&#xff0c;属于轻量级应用服务器&#xff0c;在中小型系统和并发访问用户不是很多的场合下被普遍使用&#xff0c;是开发和调试 JSP 程序的首选。 当在一台机器上配置好Apache 服务器…
阅读更多...
Ubuntu Mysql Innodb cluster集群搭建+MaxScale负载均衡（读写分离）

Ubuntu Mysql Innodb cluster集群搭建+MaxScale负载均衡（读写分离）

Ubuntu系统版本 20.04.3 LTS (Focal Fossa) 、64位系统。 cat /etc/os-release查看Ubuntu系统是32位还是64位 uname -m如果显示“i686”，则表示安装了32位操作系统。如果显示“x86_64”，则表示安装了64位操作系统。 一、安装MySql 参考： https://blog.csdn.net/qq_3712…
阅读更多...
【Datawhale组队学习：Sora原理与技术实战】Sora技术原理

【Datawhale组队学习：Sora原理与技术实战】Sora技术原理

Sora能力边界探索 最大支持60秒高清视频生成&#xff0c;以及基于已有短视频的前后扩展&#xff0c;同时保持人物/场景的高度一致性如奶茶般丝滑过渡的视频融合能力同一场景的多角度/镜头的生成能力具有动态摄像机运动的视频。随着摄像机的移动和旋转&#xff0c;人和其 他场景…
阅读更多...
JVM相关面试题（2024大厂高频面试题系列）

JVM相关面试题（2024大厂高频面试题系列）

一、JVM的组成 1、JVM由哪些部分组成&#xff0c;运行流程是什么&#xff1f; 回答&#xff1a;在JVM中共有四大部分&#xff0c;分别是Class Loader&#xff08;类加载器&#xff09;、Runtime Data Area&#xff08;运行时数据区&#xff0c;内存分区&#xff09;、Execut…
阅读更多...
mybatisPlus中 Mapper层以及Service层的方法 整理分类 以及代码实操

mybatisPlus中 Mapper层以及Service层的方法 整理分类 以及代码实操

MyBatis-Plus是一个基于MyBatis的增强工具&#xff0c;旨在简化开发、提高效率。它提供了通用的mapper和service&#xff0c;可以在不编写任何SQL语句的情况下&#xff0c;快速实现对单表的CRUD、批量、逻辑删除、分页等操作。 功能代码测试前提&#xff1a; 需要对mybatisPl…
阅读更多...
【重要公告】对BSV警报系统AS的释义

【重要公告】对BSV警报系统AS的释义

​​发表时间&#xff1a;2024年2月15日 由BSV区块链协会开发并管理的BSV警报系统&#xff08;Alert System&#xff0c;以下简称“AS”&#xff09;是BSV网络的重要组件。它是一个复杂的系统&#xff0c;主要职能是在BSV区块链网络内发布信息。这些信息通常与网络访问规则NAR相…
阅读更多...
java数据结构与算法刷题-----LeetCode572. 另一棵树的子树（经典题，树字符串化KMP）

java数据结构与算法刷题-----LeetCode572. 另一棵树的子树（经典题，树字符串化KMP）

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 文章目录 1. 暴力求解&#xff0c;深度优先2. KMP算法进行串匹配 1. 暴力求…
阅读更多...
Spring-web-Mvc

Spring-web-Mvc

文章目录 目录 文章目录 前言 1 . 什么是Spring MVC? 1.1 MVC定义 1.2 主要作用 2. Spring MVC 接受响应数据 2.1 RequestMapping注解配置访问路径 2.2 请求 2.2.1 传递单个参数 2.2.2 传递多个参数 2.2.3 传递对象 2.2.4 后端参数重命名&#xff08;后端参数映射…
阅读更多...
Linux技巧|centos7|重新认识和学习egrep和grep命令

Linux技巧|centos7|重新认识和学习egrep和grep命令

前言&#xff1a; 相信提高文本检索工具&#xff0c;大家脑海里肯定有很多工具会自动跳出来&#xff0c;比如&#xff0c;grep&#xff0c;egrep&#xff0c;sed&#xff0c;cat&#xff0c;more&#xff0c;less&#xff0c;cut&#xff0c;awk&#xff0c;vim&#xff0c;vi…
阅读更多...
Find My扫地机器人|苹果Find My技术与机器人结合，智能防丢，全球定位

Find My扫地机器人|苹果Find My技术与机器人结合，智能防丢，全球定位

扫地机器人又称自动打扫机、智能吸尘、机器人吸尘器等&#xff0c;是智能家电的一种&#xff0c;能凭借人工智能&#xff0c;自动在房间内完成地板清理工作。一般采用刷扫和真空方式&#xff0c;将地面杂物先吸纳进入自身的垃圾收纳盒&#xff0c;从而完成地面清理的功能。现今…
阅读更多...
【Vue3】CSS 新特性

【Vue3】CSS 新特性

:slotted <template> <!-- App.vue--><Son ><div class"a">我要插入了</div></Son> </template><script setup lang"ts"> import Son from ./components/Son.vue </script><style></sty…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023