电影动画shader解析与实现

着色器代码解析

大家好!我是 [数擎AI],一位热爱探索新技术的前端开发者,在这里分享前端和Web3D、AI技术的干货与实战经验。如果你对技术有热情,欢迎关注我的文章,我们一起成长、进步!
开发领域:前端开发 | AI 应用 | Web3D | 元宇宙
技术栈:JavaScript、React、ThreeJs、WebGL、Go
经验经验:6 年+ 前端开发经验,专注于图形渲染和 AI 技术
经验经验:演示地址
开源项目:AI智简未来、晓智元宇宙、数字孪生引擎 源码地址

提供的 GLSL 着色器代码通过光线行进算法(Ray Marching)生成一个动态的三维场景。以下是代码的核心功能概述:

1. 平滑联合(Smooth Union)

opSmoothUnion 函数用于平滑地融合两个几何体,使它们看起来像一个整体。
公式如下:

float opSmoothUnion( float d1, float d2, float k ) {float h = clamp( 0.5 + 0.5*(d2-d1)/k, 0.0, 1.0 );return mix( d2, d1, h ) - k*h*(1.0-h);
}

其中:

  • d1 和 𝑑2 表示两个几何体的距离场值。
  • k:控制平滑程度的参数。
  • mix 函数用于插值,clamp 函数限制范围。

2. 符号距离函数(SDF)

sdSphere 函数定义了一个点到球体表面的距离:

float sdSphere( vec3 p, float s ) {return length(p) - s;
}
  • 输入 p 是点的三维坐标,s 是球体的半径。
  • 返回值为点到球表面的最短距离。

3. 场景组合

map 函数动态地组合多个球体,通过时间参数让它们产生动画:

float map(vec3 p) {float d = 2.0;for (int i = 0; i < 16; i++) {float fi = float(i);float time = iTime * (fract(fi * 412.531 + 0.513) - 0.5) * 2.0;d = opSmoothUnion(sdSphere(p + sin(time + fi * vec3(52.5126, 64.62744, 632.25)) * vec3(2.0, 2.0, 0.8),mix(0.5, 1.0, fract(fi * 412.531 + 0.5124))),d,0.4);}return d;
}
  • 通过循环,生成 16 个动态移动的球体,并用 opSmoothUnion 进行平滑组合。
  • 球体的位置随时间(iTime)变化,实现动画效果。

4. 光线行进

在 mainImage 中实现了光线行进算法,通过迭代寻找光线与几何体的交点:

vec3 rayOri = vec3(...); // 光线起点
vec3 rayDir = vec3(0.0, 0.0, -1.0); // 光线方向
for (int i = 0; i < 64; i++) {  p = rayOri + rayDir * depth;  float dist = map(p);  depth += dist;  if (dist < 1e-6) break;  
}
  • depth 表示光线当前行进的深度。
  • map§ 计算光线与场景的最近距离。

完整代码

import * as THREE from 'three';
import React, { useEffect, useRef } from 'react';const CineShader: React.FC = () => {const cineShaderRef = useRef<any>();useEffect(() => {// 初始化场景、相机和渲染器const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000,);const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 设置相机位置camera.position.z = 5;// 创建自定义 ShaderMaterialconst shaderMaterial = new THREE.ShaderMaterial({uniforms: {iResolution: {value: new THREE.Vector2(window.innerWidth, window.innerHeight),},iTime: { value: 0.0 },},vertexShader: `varying vec2 vUv;void main() {vUv = uv;gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);}`,fragmentShader: `uniform vec2 iResolution;uniform float iTime;varying vec2 vUv;// 平滑联合float opSmoothUnion(float d1, float d2, float k) {float h = clamp(0.5 + 0.5 * (d2 - d1) / k, 0.0, 1.0);return mix(d2, d1, h) - k * h * (1.0 - h);}// 球体 SDFfloat sdSphere(vec3 p, float s) {return length(p) - s;}// 场景组合float map(vec3 p) {float d = 2.0;for (int i = 0; i < 16; i++) {float fi = float(i);float time = iTime * (fract(fi * 412.531 + 0.513) - 0.5) * 2.0;d = opSmoothUnion(sdSphere(p + sin(time + fi * vec3(52.5126, 64.62744, 632.25)) * vec3(2.0, 2.0, 0.8), mix(0.5, 1.0, fract(fi * 412.531 + 0.5124))),d,0.4);}return d;}// 计算法线vec3 calcNormal(vec3 p) {const float h = 1e-5;const vec2 k = vec2(1, -1);return normalize(k.xyy * map(p + k.xyy * h) +k.yyx * map(p + k.yyx * h) +k.yxy * map(p + k.yxy * h) +k.xxx * map(p + k.xxx * h));}void main() {vec2 uv = gl_FragCoord.xy / iResolution;uv = uv * 2.0 - 1.0; // 将坐标转换为 [-1, 1]// 设置光线起点和方向vec3 rayOri = vec3(uv * vec2(iResolution.x / iResolution.y, 1.0) * 6.0, 3.0);vec3 rayDir = vec3(0.0, 0.0, -1.0);// 光线行进float depth = 0.0;vec3 p;for (int i = 0; i < 64; i++) {p = rayOri + rayDir * depth;float dist = map(p);depth += dist;if (dist < 1e-6) {break;}}depth = min(6.0, depth); // 限制最大深度// 计算颜色vec3 n = calcNormal(p);float b = max(0.0, dot(n, vec3(0.577))); // 简单光照vec3 col = (0.5 + 0.5 * cos((b + iTime * 3.0) + uv.xyx * 2.0 + vec3(0, 2, 4))) * (0.85 + b * 0.35);col *= exp(-depth * 0.15); // 添加深度雾效gl_FragColor = vec4(col, 1.0);}`,});// 创建平面并添加到场景const geometry = new THREE.PlaneGeometry(window.innerWidth, window.innerHeight);const plane = new THREE.Mesh(geometry, shaderMaterial);scene.add(plane);// 动画渲染循环function animate() {requestAnimationFrame(animate);// 更新时间shaderMaterial.uniforms.iTime.value += 0.1;renderer.render(scene, camera);}animate();// 响应窗口大小调整window.addEventListener('resize', () => {renderer.setSize(window.innerWidth, window.innerHeight);shaderMaterial.uniforms.iResolution.value.set(window.innerWidth,window.innerHeight,);camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();});}, []);return <div ref={cineShaderRef}/>;
};export default CineShader;
关注我们

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

代码随想录算法【Day11】

150. 逆波兰表达式求值 class Solution { public:int evalRPN(vector<string>& tokens) {// 力扣修改了后台测试数据&#xff0c;需要用longlongstack<long long> st; for (int i 0; i < tokens.size(); i) {if (tokens[i] "" || tokens[i] &…

让Qt 具有多选文件夹和记忆上一次打开位置的文件对话框

最近要做一个可以多选文件夹的功能&#xff0c;在网上查阅了多个资料&#xff0c;发现github有一段代码可以实现该功能&#xff0c;于是将其收入进行改造。另外qt自带的 getExistingDirectory 和 getOpenFileNames 不具有记忆上一次打开的文件夹位置。要实现多选文件夹和记忆上…

【杂谈】-50+个生成式人工智能面试问题(一)

50个生成式人工智能面试问题 文章目录 50个生成式人工智能面试问题1、生成式人工智能面试问题与神经网络相关Q1. 什么是Transformers&#xff1f;Q2. 什么是注意力机制&#xff1f;有哪些类型的注意力机制&#xff1f;Q3. 为什么Transformer比RNN架构更好&#xff1f;Q4. Trans…

【FlutterDart】 拖动边界线改变列宽类似 vscode 那种拖动改变编辑框窗口大小(11 /100)

【Flutter&Dart】 拖动改变 widget 的窗口尺寸大小GestureDetector&#xff5e;简单实现&#xff08;10 /100&#xff09; 【Flutter&Dart】 拖动边界线改变列宽并且有边界高亮和鼠标效果&#xff08;12 /100&#xff09; 上效果&#xff1a; 这个在知乎里找到的效果&…

原型模式详解与实践

在软件开发的奇妙世界里&#xff0c;我们常常面临重复创建相似对象的任务。如果每次创建都要从头开始设置各种属性和状态&#xff0c;不仅繁琐&#xff0c;还可能降低效率。原型模式就像一位神奇的魔法师&#xff0c;为我们提供了一种通过复制现有对象来创建新对象的优雅方式。…

比较procfs 、 sysctl和Netlink

procfs 文件系统和 sysctl 的使用: procfs 文件系统(/proc) procfs 文件系统是 Linux 内核向用户空间暴露内核数据结构以及配置信息的一种方式。`procfs` 的挂载点是 /proc 目录,这个目录中的文件和目录呈现内核的运行状况和配置信息。通过读写这些文件,可以查看和控制内…

【Rust自学】11.1. 编写和运行测试

喜欢的话别忘了点赞、收藏加关注哦&#xff0c;对接下来的教程有兴趣的可以关注专栏。谢谢喵&#xff01;(&#xff65;ω&#xff65;) 11.1.1. 什么是测试 在Rust里一个测试就是一个函数&#xff0c;它被用于验证非测试代码的功能是否和预期一致。 在一个测试的函数体里通…

数据分析思维(八):分析方法——RFM分析方法

数据分析并非只是简单的数据分析工具三板斧——Excel、SQL、Python&#xff0c;更重要的是数据分析思维。没有数据分析思维和业务知识&#xff0c;就算拿到一堆数据&#xff0c;也不知道如何下手。 推荐书本《数据分析思维——分析方法和业务知识》&#xff0c;本文内容就是提取…

有关Redis的相关概述

一、Redis概述 1.1 Redis简介 Redis是一个开源的高性能键值对数据库&#xff0c;使用C语言编写&#xff0c;支持多种数据结构&#xff0c;如字符串&#xff08;String&#xff09;、列表&#xff08;List&#xff09;、哈希&#xff08;Hash&#xff09;、集合&#xff08;Set…

_controller_validate

在 controller 中我们首先对所有的请求进行日志记录&#xff0c;身份校验&#xff0c;参数校验之后直接把过滤后的数据丢给 logic(serviceImpl) 。这样子一来 controller 只是充当了 路由 过滤器 的作用&#xff0c;如果之后修改 API &#xff0c;前端的请求地址不需要修改&am…

57. Three.js案例-创建一个带有聚光灯和旋转立方体的3D场景

57. Three.js案例-创建一个带有聚光灯和旋转立方体的3D场景 实现效果 该案例实现了使用Three.js创建一个带有聚光灯和旋转立方体的3D场景。 知识点 WebGLRenderer&#xff08;WebGL渲染器&#xff09; THREE.WebGLRenderer 是 Three.js 中用于将场景渲染为 WebGL 内容的核…

Idea-离线安装SonarLint插件地址

地址&#xff1a; SonarQube for IDE - IntelliJ IDEs Plugin | Marketplace 选择Install Plugin from Disk..&#xff0c;选中下载好的插件&#xff0c;然后重启idea

MyBatis面试-1

1、什么是MyBatis&#xff1f; MyBatis是一个半ORM框架(对象关系映射)。---》Hibernate全ORM框架 ---》基于JDBC封装的框架 专注于SQL语句&#xff0c;不用关心JDBC操作的其他流程 2、MyBatis有什么优点 基于SQL语句的编程&#xff0c;相对来说会更加的灵活和JDBC相比&#…

Unity:删除注册表内的项目记录

然后WinR按键输入regedit 打开注册表 在注册表 HKEY CURRENT USER—>SOFTWARE—>Unity—>UnityEditor—>DefaultCompany —>language_Test 中&#xff0c;删除我们的之前存储的语言环境数据。在 “ 三、文本调用和替换 ” 测试时已经将语言环境存储到注册表中了…

历代iPhone运行内存大小和电池容量信息

系列设备名称充电端口标配充电线PD快充无线充电 (W)标配充电器电池容量 (mAh)发布时间RAM运存iPhone 16iPhone 16 Pro MaxUSB Type-CUSB-C to USB-C支持25无47472024/9/108GB LPDDR5XiPhone 16 ProUSB Type-CUSB-C to USB-C支持25无35772024/9/108GB LPDDR5XiPhone 16 PlusUSB …

JAVA学习记录3

文章为个人学习记录&#xff0c;仅供参考&#xff0c;如有错误请指出。 上期说到使用记事本编写Java程序太过繁琐&#xff0c;所以我们后面都将使用IDEA进行代码的编写、编译和运行。 如何下载安装IDEA&#xff1f; 这个的下载途径也很多&#xff0c;我还是推荐去官网下载(h…

CSS——22.静态伪类(伪类是选择不同元素状态)

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>静态伪类</title> </head><body><a href"#">我爱学习</a></body> </html>单击链接前的样式 左键单击&#xff08;且…

如何在 Hive SQL 中处理复杂的数据类型?

目录 一、复杂数据类型简介 二、创建表时使用复杂数据类型 三、插入数据到复杂数据类型的表 四、查询复杂数据类型

Mysql 性能优化:索引条件下推(ICP)

MySQL 索引下推&#xff08;Index Condition Pushdown&#xff0c;ICP&#xff09;是一种查询优化技术&#xff0c;旨在提高使用索引的查询效率。它是在 MySQL 5.6 中引入的&#xff0c;通过将部分 WHERE 子句的过滤条件下推到索引扫描阶段来减少不必要的回表操作&#xff0c;从…

Linux 环境(Ubuntu)部署 Hadoop 环境

前置准备 准备三台机器 cat /etc/hosts 192.168.1.7 hadoop-master 192.168.1.11 hadoop-slave01 192.168.1.12 hadoop-slave02Linux 环境 cat /etc/os-release PRETTY_NAME"Ubuntu 24.10" NAME"Ubuntu" VERSION_ID"24.10" VERSION"24.…