Three.js Tri-panner (三面贴图) 材质 两种实现方式
文章目录
- 介绍
- 自定义shader
- NodeMaterial
- 骨骼材质特殊处理
介绍
Tri-panner 在babylonjs中有支持 但是three.js目前的基础材质并不支持
需要自己定义shader 或者使用目前还没有什么完善的文档的 NodeMaterial
下面展示两种实现方式
自定义shader
/*** @description: 替换三角面贴图 https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/triPlanarMat* @param {SingleMaterialMesh} mesh* @return {*}*/
export const useTriplanarMapping = (mesh: SingleMaterialMesh) => {const material = mesh.material.clone();mesh.material = material;material.map!.wrapS = THREE.RepeatWrapping;material.map!.wrapT = THREE.RepeatWrapping;material.onBeforeCompile = (shader) => {shader.vertexShader = shader.vertexShader.replace("#include <common>",`#include <common>varying vec3 tripPosition;varying vec3 tripNormal;`);shader.vertexShader = shader.vertexShader.replace("#include <fog_vertex>",`#include <fog_vertex>vec4 tripPosition4 = modelMatrix * vec4(position,1.) ;tripPosition = tripPosition4.xyz;tripNormal = normal * normalMatrix;vec3 world_space_normal = vec3(modelMatrix * vec4(normal, 0.0));tripNormal = normal;`);shader.fragmentShader = shader.fragmentShader.replace("#include <common>",`#include <common>varying vec3 tripPosition;varying vec3 tripNormal;vec3 blendNormal(vec3 normal){vec3 blending = abs( normal );blending = normalize(max(blending, 0.00001)); // Force weights to sum to 1.0 float b = (blending.x + blending.y + blending.z);blending /= vec3(b, b, b);return blending;}vec3 triplanarMapping (sampler2D tex, vec3 normal, vec3 position) {vec3 normalBlend = blendNormal(normal);vec3 xColor = texture(tex, position.yz).rgb;vec3 yColor = texture(tex, position.xz).rgb;vec3 zColor = texture(tex, position.xy).rgb;return (xColor * normalBlend.x + yColor * normalBlend.y + zColor * normalBlend.z);}`);shader.fragmentShader = shader.fragmentShader.replace("#include <map_fragment>",`#include <map_fragment>diffuseColor.rgb = vec3(triplanarMapping( map ,tripNormal,tripPosition));`);// shader.fragmentShader = shader.fragmentShader.replace(// "#include <color_fragment>",// `// #include <color_fragment>// diffuseColor.rgb = vec3(triplanar_mapping( map ,tripNormal,tripPosition,1.0));// `// );};
};
NodeMaterial
这是threejs新系统充满未来 目前还没有一个完善的文档 并且不太稳定 r132的时候支持这个材质 r138就被删除了 一些api也都有变化 可以先参考 https://raw.githack.com/sunag/three.js/dev-nodes-doc/docs/index.html#manual/en/introduction/How-to-use-node-material
import {MeshBasicNodeMaterial,texture,triplanarTexture,
} from "three/examples/jsm/nodes/Nodes.js";
import { nodeFrame } from "three/examples/jsm/renderers/webgl/nodes/WebGLNodes.js";const skyMat = new MeshBasicNodeMaterial();skyMat.colorNode = triplanarTexture(texture(this.helper.loadTexture("/public/textures/coral_stone_wall_diff_1k.jpg",(map) => {map.colorSpace = THREE.SRGBColorSpace;map.wrapS = THREE.RepeatWrapping;map.wrapT = THREE.RepeatWrapping;}))
);
skyMat.side = THREE.DoubleSide;const sky = new THREE.Mesh(new THREE.SphereGeometry(2, 32, 15), skyMat);
scene.add(sky);animation() {nodeFrame.update();
}
要注意每一次render 同时调用 nodeFrame.update();
否则报错
骨骼材质特殊处理
这个问题需要根据three版本进行区别处理
r160版本 使用的是 position
r155版本使用的是 nodeUniform2 * vec4( 忘了叫什么了, 1.0 )
总之每个版本可能不一样 因为 节点系统正在开发 需要对应版本对应处理
r160版本写法如下
material.onBeforeCompile = (shader) => {material.vertexShader = shader.vertexShader.replace("#include <skinning_vertex>",`#include <skinning_vertex>nodeVarying2 = (modelMatrix * vec4(transformed,1.0)).xyz;`);
};
r155版本写法如下
material.onBeforeCompile = (shader) => {material.vertexShader = shader.vertexShader.replace("#include <skinning_vertex>",`#include <skinning_vertex>nodeVarying2 = ( nodeUniform2 * vec4( transformed, 1.0 ) );`);};
相关文章:

Three.js Tri-panner (三面贴图) 材质 两种实现方式
文章目录 介绍自定义shaderNodeMaterial骨骼材质特殊处理 介绍 Tri-panner 在babylonjs中有支持 但是three.js目前的基础材质并不支持 需要自己定义shader 或者使用目前还没有什么完善的文档的 NodeMaterial 下面展示两种实现方式 自定义shader /*** description: 替换三角面…...

Docker部署Flask项目
Docker部署Flask项目 一、准备项目代码二、编写Dockerfile三、服务器部署 一、准备项目代码 这里写了一个简单的Flask的demo,源代码如下: from flask import Flaskapp Flask(__name__)app.route("/") def index():return "<h1 styl…...

Git将某个文件合并到指定分支
企业开发中,经常会单独拉分支去做自己的需求开发,但是某些时候一些公共的配置我们需要从主线pull,这时候整个分支merge显然不合适 1.切换至待合并文件的分支 git checkout <branch>2.将目标分支的单个文件合并到当前分支 git checkou…...

Dockerfile构建镜像以及阿里云上传
前言 我们在使用docker部署微服务项目的时候会发现这样一个问题:每个服务构建出的镜像文件都很大,几百M,有些原始镜像也已经占据了很多内存了... 这种大的镜像往往都会导致迁移的速度变慢。其实我们启动容器主要最需要的镜像是jdk࿰…...

锂离子电池建模综述
锂电池很有吸引力,因为在元素周期表中,锂是一种非常正电的元素,它也恰好是最轻的金属,密度是水的一半。通常,电池由串联/并联的电化学电池组成。每个电池都包含一个负极(放电时为阳极)和一个由电…...
获取淘宝商品销量数据的方法分享(API、爬虫技术)
随着电子商务的飞速发展,获取淘宝商品销量数据的需求越来越强烈。无论是商家、分析师还是研究人员,都需要这些数据来了解市场趋势、竞争对手情况以及制定营销策略。本文将分享如何通过API和爬虫技术获取淘宝商品销量数据。 一、API获取数据 淘宝开放平…...

android 自定义八边形进度条
自定义八边形动画效果图如下 绘制步骤: 1.先绘制橙色底部八边形实心 2.黑色画笔绘制第二层,让最外层显示一条线条宽度即可 3.再用黄色画笔绘制黄色部分 4.使用渐变画笔根据当前进度绘制覆盖黄色部分 5.使用黑色画笔根据当前进度绘制刻度条 6.黑色画笔绘制…...

域名群站开源系统分享开源域名授权系统
一、需要自己安装PHP和MYSQL服务器环境。 二、务必设置伪静态规则,否则将无法访问文章栏目页面。 三、启用伪静态功能,请在站点设置中选择使用thinkphp的伪静态规则。 四、在域名的根目录下找到”data/config.php”文件,填入数据库的账号和…...
CTF - Web 干货
目录 1、php反序列化之pop链构造 2、常见php伪协议的使用 (1)php://filter (2)php://input 3、文件上传常规操作 (1) 前端绕过 (2) 修改文件类型 (3) 配合.user.ini 或.htaccess解析 (4) 爆破可解析后缀 (5) 针对Windows…...

mobi文件怎么转换成pdf?
mobi文件怎么转换成pdf?在数字化时代,电子书籍成为了越来越受欢迎的阅读方式。我们可以通过多种格式的电子书来获取知识和娱乐,其中一种常见的格式就是Mobi文件。Mobi文件是亚马逊公司开发的一种电子书格式,它主要用于Kindle设备和…...
spakr 提交任务
当前集群支持3中集群管理 Standalone(spak框架自身拥有能力)Apache Mesos Hadoop YARN Kubernetes 使用/spark-submit脚本提交任务,脚本后面可以接参数 ./bin/spark-submit \--class <main-class> \--master <master-url> \--de…...

What is `addFormattersdoes` in `WebMvcConfigurer` ?
addFormatters 方法在SpringMVC框架中主要用于向Spring容器注册自定义的格式化器(Formatter) SpringMVC内置了一系列的标准格式化器,用于处理日期、数字和其他常见类型的转换。 开发者也可以通过实现 WebMvcConfigurer 接口,并重写…...

新冠疫情数据可视化分析大屏
项目背景: 新冠疫情的爆发对全球造成了深远的影响,实时监控和数据分析成为公共卫生管理的重要组成部分。为了更好地追踪疫情动态,本项目旨在开发一个集疫情数据采集、处理、分析与可视化于一体的大屏监控系统。 项目介绍: 本项…...

c#异形窗体遮罩效果
c#异形窗体遮罩效果,移动,关闭,最大化,最小化,还原操作 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Drawing.Drawing2D…...

橘子学Mybatis07之Mybatis关于缓存的设计
很逆天的一件事是,我上一次发mybatis是在2022年10月15号,然后直到今天才开始总结下一篇Mybatis的东西。一年里面忙成那啥了,而且重心都投入在了Elasticsearch的学习上面,基本一年下来都在搞ES,并且考下了ECE认证&#…...

怎样制作一本旅游电子相册呢?
随着数码技术的发展,旅游电子相册已成为越来越多旅游爱好者的必备工具。它不仅能让您随时随地欣赏自己的旅行回忆,还能分享给亲朋好友,甚至上传到社交媒体上,让更多人了解您的旅行故事。那么,如何制作一本精美的旅游…...

Windows搭建OpenCV环境(Python+Anaconda)
Windows搭建OpenCV环境(PythonAnacondapycharm) Anaconda,中文大蟒蛇,是一个开源的Python发行版本,其包含了conda、Python等180多个科学包及其依赖项。其中包含python调opencv相关的依赖,相当于大礼包全家桶。 下载地址…...
linux-等保三级脚本(2)
该脚本主要是针对 CentOS Linux 7 合规基线加固的一些配置操作,包括创建用户、安全审计配置、入侵防范配置、访问控制配置、身份鉴别策略配置等。如果您需要在脚本中添加公司网址,您可以在适当的位置添加相应的内容。不过请注意,在实际生产环…...

【论文阅读】Consistency Models
文章目录 IntroductionDiffusion ModelsConsistency ModelsDefinitionParameterizationSampling Training Consistency Models via DistillationTraining Consistency Models in IsolationExperiment Introduction 相比于单步生成的模型(例如 GANs, VAEs, normalizi…...

Ceph应用管理
目录 资源池 Pool 管理 创建 CephFS 文件系统 MDS 接口 服务端操作 客户端操作 创建 Ceph 块存储系统 RBD 接口 创建 Ceph 对象存储系统 RGW 接口 OSD 故障模拟与恢复 资源池 Pool 管理 我们如何向 Ceph 中存储数据呢?首先我们需要在 Ceph 中定义一个 Pool…...

【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器
一.自适应梯度算法Adagrad概述 Adagrad(Adaptive Gradient Algorithm)是一种自适应学习率的优化算法,由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率,适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

Unity3D中Gfx.WaitForPresent优化方案
前言 在Unity中,Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染(即CPU被阻塞),这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案: 对惹,这里有一个游戏开发交流小组&…...
DockerHub与私有镜像仓库在容器化中的应用与管理
哈喽,大家好,我是左手python! Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库,用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...
【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密
在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

大数据零基础学习day1之环境准备和大数据初步理解
学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 (1)设置网关 打开VMware虚拟机,点击编辑…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战
在现代战争中,电磁频谱已成为继陆、海、空、天之后的 “第五维战场”,雷达作为电磁频谱领域的关键装备,其干扰与抗干扰能力的较量,直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器,凭借数字射…...

深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南
🚀 C extern 关键字深度解析:跨文件编程的终极指南 📅 更新时间:2025年6月5日 🏷️ 标签:C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言🔥一、extern 是什么?&…...
C++八股 —— 单例模式
文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全(Thread Safety) 线程安全是指在多线程环境下,某个函数、类或代码片段能够被多个线程同时调用时,仍能保证数据的一致性和逻辑的正确性…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 在 GPU 上对图像执行 均值漂移滤波(Mean Shift Filtering),用于图像分割或平滑处理。 该函数将输入图像中的…...
AspectJ 在 Android 中的完整使用指南
一、环境配置(Gradle 7.0 适配) 1. 项目级 build.gradle // 注意:沪江插件已停更,推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...