当前位置: 首页 > news >正文

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&#xff0c;源代码如下&#xff1a; from flask import Flaskapp Flask(__name__)app.route("/") def index():return "<h1 styl…...

Git将某个文件合并到指定分支

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

Dockerfile构建镜像以及阿里云上传

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

锂离子电池建模综述

锂电池很有吸引力&#xff0c;因为在元素周期表中&#xff0c;锂是一种非常正电的元素&#xff0c;它也恰好是最轻的金属&#xff0c;密度是水的一半。通常&#xff0c;电池由串联/并联的电化学电池组成。每个电池都包含一个负极&#xff08;放电时为阳极&#xff09;和一个由电…...

获取淘宝商品销量数据的方法分享(API、爬虫技术)

随着电子商务的飞速发展&#xff0c;获取淘宝商品销量数据的需求越来越强烈。无论是商家、分析师还是研究人员&#xff0c;都需要这些数据来了解市场趋势、竞争对手情况以及制定营销策略。本文将分享如何通过API和爬虫技术获取淘宝商品销量数据。 一、API获取数据 淘宝开放平…...

android 自定义八边形进度条

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

域名群站开源系统分享开源域名授权系统

一、需要自己安装PHP和MYSQL服务器环境。 二、务必设置伪静态规则&#xff0c;否则将无法访问文章栏目页面。 三、启用伪静态功能&#xff0c;请在站点设置中选择使用thinkphp的伪静态规则。 四、在域名的根目录下找到”data/config.php”文件&#xff0c;填入数据库的账号和…...

CTF - Web 干货

目录 1、php反序列化之pop链构造 2、常见php伪协议的使用 &#xff08;1&#xff09;php://filter &#xff08;2&#xff09;php://input 3、文件上传常规操作 (1) 前端绕过 (2) 修改文件类型 (3) 配合.user.ini 或.htaccess解析 (4) 爆破可解析后缀 (5) 针对Windows…...

mobi文件怎么转换成pdf?

mobi文件怎么转换成pdf&#xff1f;在数字化时代&#xff0c;电子书籍成为了越来越受欢迎的阅读方式。我们可以通过多种格式的电子书来获取知识和娱乐&#xff0c;其中一种常见的格式就是Mobi文件。Mobi文件是亚马逊公司开发的一种电子书格式&#xff0c;它主要用于Kindle设备和…...

spakr 提交任务

当前集群支持3中集群管理 Standalone&#xff08;spak框架自身拥有能力&#xff09;Apache Mesos Hadoop YARN Kubernetes 使用/spark-submit脚本提交任务&#xff0c;脚本后面可以接参数 ./bin/spark-submit \--class <main-class> \--master <master-url> \--de…...

What is `addFormattersdoes` in `WebMvcConfigurer` ?

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

新冠疫情数据可视化分析大屏

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

c#异形窗体遮罩效果

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

橘子学Mybatis07之Mybatis关于缓存的设计

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

怎样制作一本旅游电子相册呢?

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

Windows搭建OpenCV环境(Python+Anaconda)

Windows搭建OpenCV环境(PythonAnacondapycharm) Anaconda&#xff0c;中文大蟒蛇&#xff0c;是一个开源的Python发行版本&#xff0c;其包含了conda、Python等180多个科学包及其依赖项。其中包含python调opencv相关的依赖&#xff0c;相当于大礼包全家桶。 下载地址&#xf…...

linux-等保三级脚本(2)

该脚本主要是针对 CentOS Linux 7 合规基线加固的一些配置操作&#xff0c;包括创建用户、安全审计配置、入侵防范配置、访问控制配置、身份鉴别策略配置等。如果您需要在脚本中添加公司网址&#xff0c;您可以在适当的位置添加相应的内容。不过请注意&#xff0c;在实际生产环…...

【论文阅读】Consistency Models

文章目录 IntroductionDiffusion ModelsConsistency ModelsDefinitionParameterizationSampling Training Consistency Models via DistillationTraining Consistency Models in IsolationExperiment Introduction 相比于单步生成的模型&#xff08;例如 GANs, VAEs, normalizi…...

Ceph应用管理

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

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

leetcodeSQL解题:3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...