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

轻量封装WebGPU渲染系统示例<51>- 视差贴图(Parallax Map)(源码)

视差纹理是一种片段着色阶段增强材质表面凹凸细节的技术。

这里在WebGPU的实时渲染材质管线中实现了视差贴图计算,以便增强相关的纹理细节表现力。

当前示例源码github地址:

https://github.com/vilyLei/voxwebgpu/blob/feature/material/src/voxgpu/sample/ParallaxTexTest.ts

当前示例运行效果:

此示例基于此渲染系统实现,当前示例TypeScript源码如下:

export class ParallaxTexTest {private mRscene = new RendererScene();initialize(): void {console.log("ParallaxTexTest::initialize() ...");this.loadImg();}initSys(): void {this.mRscene.initialize({canvasWith: 512,canvasHeight: 512,mtplEnabled: true,rpassparam:{multisampled: true}});this.initScene();this.initEvent();}private mPixels: Uint8ClampedArray;private mPixelsW = 128;private mPixelsH = 128;getRandomColor(s?: number): ColorDataType {if (s === undefined) {s = 1.0;}let i = 5;let j = Math.floor(Math.random() * this.mPixelsW);let k = i * this.mPixelsW + j;let vs = this.mPixels;k *= 4;let cs = [s * vs[k] / 255.0, s * vs[k + 1] / 255.0, s * vs[k + 2] / 255.0];return cs;}private loadImg(): void {let img = new Image();img.onload = evt => {this.mPixelsW = img.width;this.mPixelsH = img.height;let canvas = document.createElement("canvas");canvas.width = img.width;canvas.height = img.height;let ctx = canvas.getContext('2d');ctx.drawImage(img, 0, 0);this.mPixels = ctx.getImageData(0, 0, img.width, img.height).data;this.initSys();}img.src = 'static/assets/colorPalette.jpg';}private mLightData: MtLightDataDescriptor;private createLightData(): MtLightDataDescriptor {let ld = { pointLights: [], directionLights: [], spotLights: [] } as MtLightDataDescriptor;let total = 5;let scale = 3.0;for (let i = 0; i < total; ++i) {for (let j = 0; j < total; ++j) {let position = [-500 + 250 * j, 290 + Math.random() * 30, -500 + 250 * i];position[0] += Math.random() * 60 - 30;position[2] += Math.random() * 60 - 30;let color = this.getRandomColor(scale);let factor1 = 0.00001;let factor2 = 0.00002;let pLight = new PointLight({ color, position, factor1, factor2 });ld.pointLights.push(pLight);if (Math.random() > 0.5) {position = [-500 + 150 * j, 290 + Math.random() * 50, -500 + 150 * i];position[0] += Math.random() * 160 - 80;position[2] += Math.random() * 160 - 80;color = this.getRandomColor(scale);let direction = [(Math.random() - 0.5) * 8, -1, (Math.random() - 0.5) * 8];let degree = Math.random() * 10 + 5;let spLight = new SpotLight({ position, color, direction, degree, factor1, factor2 });ld.spotLights.push(spLight);}}}let dLight = new DirectionLight({ color: [0.5, 0.5, 0.5], direction: [-1, -1, 0] });ld.directionLights.push(dLight);return ld;}private createBillboard(pv: Vector3DataType, c: ColorDataType, type: number): void {let rc = this.mRscene;let diffuseTex0 = { diffuse: { url: "static/assets/flare_core_03.jpg" } };if (type > 1) {diffuseTex0 = { diffuse: { url: "static/assets/circleWave_disp.png" } };}let billboard = new BillboardEntity({ size: 10, textures: [diffuseTex0] });billboard.color = c;billboard.alpha = 1;billboard.transform.setPosition(pv);rc.addEntity(billboard);}private createBillboards(): void {let lightData = this.mLightData;let pls = lightData.pointLights;for (let i = 0; i < pls.length; i++) {let lp = pls[i];this.createBillboard(lp.position, lp.color, 1);}let spls = lightData.spotLights;for (let i = 0; i < spls.length; i++) {let lp = spls[i];this.createBillboard(lp.position, lp.color, 2);}}private initScene(): void {let rc = this.mRscene;let mtpl = rc.renderer.mtpl;this.mLightData = this.createLightData();mtpl.light.lightData = this.mLightData;mtpl.shadow.param.intensity = 0.4;mtpl.shadow.param.radius = 4;let position = [-30, 220, -50];let materials = this.createMaterials(true);let sphere: SphereEntity;let total = 3;let py = 150;for (let i = 0; i < total; ++i) {for (let j = 0; j < total; ++j) {if (total > 2) {position = [-350 + 350 * j, py, -350 + 350 * i];} else {position = [0, py, 0];}let rotation = [0, Math.random() * 360, 0];let materials = this.createMaterials(true);if (sphere) {let sph = new SphereEntity({geometry: sphere.geometry,materials,transform: { position, rotation }});rc.addEntity(sph);} else {sphere = new SphereEntity({radius: 110.0,materials,transform: { position, rotation }});rc.addEntity(sphere);}}}position = [0, 0, 0];materials = this.createMaterials(true, false, 'back');let plane = new PlaneEntity({axisType: 1,materials,extent: [-600, -600, 1200, 1200],transform: { position }});rc.addEntity(plane);this.createBillboards();}private createArmTextures(): WGTextureDataDescriptor[] {const albedoTex = { albedo: { url: `static/assets/pbrtex/rough_plaster_broken_diff_1k.jpg` } };const normalTex = { normal: { url: `static/assets/pbrtex/rough_plaster_broken_nor_1k.jpg` } };const armTex = { arm: { url: `static/assets/pbrtex/rough_plaster_broken_arm_1k.jpg` } };const parallaxTex = { parallax: { url: `static/assets/pbrtex/rough_plaster_broken_disp_1k.jpg` } };let envTex = { specularEnv: {} };let textures = [envTex,albedoTex,normalTex,armTex,parallaxTex] as WGTextureDataDescriptor[];return textures;}private createMaterials(shadowReceived = false, shadow = true, faceCullMode = 'back', uvParam?: number[]): BaseMaterial[] {let textures0 = this.createArmTextures();let material0 = this.createMaterial(textures0, ["solid"], 'less', faceCullMode);this.applyMaterialPPt(material0, shadowReceived, shadow);let list = [material0];if (uvParam) {for (let i = 0; i < list.length; ++i) {list[i].property.uvParam.value = uvParam;}}return list;}private applyMaterialPPt(material: BaseMaterial, shadowReceived = false, shadow = true): void {let ppt = material.property;ppt.ambient.value = [0.2, 0.2, 0.2];ppt.albedo.value = this.getRandomColor(1.0);ppt.arms.roughness = Math.random() * 0.95 + 0.05;ppt.arms.metallic = 0.2;ppt.armsBase.value = [0, 1.0, 0];ppt.specularFactor.value = [0.1, 0.1, 0.1];ppt.shadow = shadow;ppt.lighting = true;ppt.shadowReceived = shadowReceived;}private createMaterial(textures: WGTextureDataDescriptor[], blendModes: string[], depthCompare = 'less', faceCullMode = 'back'): BaseMaterial {let pipelineDefParam = {depthWriteEnabled: true,faceCullMode,blendModes,depthCompare};let material = new BaseMaterial({ pipelineDefParam });material.addTextures(textures);return material;}private initEvent(): void {const rc = this.mRscene;rc.addEventListener(MouseEvent.MOUSE_DOWN, this.mouseDown);new MouseInteraction().initialize(rc, 0, false).setAutoRunning(true);}private mouseDown = (evt: MouseEvent): void => { };run(): void {this.mRscene.run();}
}

相关文章:

轻量封装WebGPU渲染系统示例<51>- 视差贴图(Parallax Map)(源码)

视差纹理是一种片段着色阶段增强材质表面凹凸细节的技术。 这里在WebGPU的实时渲染材质管线中实现了视差贴图计算&#xff0c;以便增强相关的纹理细节表现力。 当前示例源码github地址: https://github.com/vilyLei/voxwebgpu/blob/feature/material/src/voxgpu/sample/Para…...

YOLOv8改进 | 2023主干篇 | 华为最新VanillaNet主干替换Backbone实现大幅度长点

一、本文介绍 本文给大家来的改进机制是华为最新VanillaNet网络&#xff0c;其是今年最新推出的主干网络&#xff0c;VanillaNet是一种注重极简主义和效率的神经网络架构。它的设计简单&#xff0c;层数较少&#xff0c;避免了像深度架构和自注意力这样的复杂操作(需要注意的是…...

Leetcode 376 摆动序列

题意理解&#xff1a; 如果连续数字之间的差严格地在正数和负数之间交替&#xff0c;则数字序列称为 摆动序列 如果是摆动序列&#xff0c;前后差值呈正负交替出现 为保证摆动序列尽可能的长&#xff0c;我们可以尽可能的保留峰值&#xff0c;&#xff0c;删除上下坡的中间值&…...

51单片机控制1602LCD显示屏输出自定义字符二

51单片机控制1602LCD显示屏输出自定义字符二 1.概述 1602LCD除了内置的字符外还提供自定义字符功能&#xff0c;当内置的字符中没有我们想要输出的字符时&#xff0c;我们就可以自己创造字符让他显示&#xff0c;下面介绍1602如何创建自定义字符。 2.1602LCD创建字符原理 自…...

HarmonyOS自学-Day2(@Builder装饰器)

目录 文章声明⭐⭐⭐让我们开始今天的学习吧&#xff01;Builder装饰器&#xff1a;自定义构建函数Builder介绍Builder使用说明自定义组件中创建自定义构建函数全局自定义构建函数 Builder参数传递规则按引用传递参数按值传递参数 文章声明⭐⭐⭐ 该文章为我&#xff08;有编程…...

bottom-up-attention-vqa-master 成功复现!!!

代码地址 1、create_dictionary.py 建立词典和使用预训练的glove向量 &#xff08;1&#xff09;create_dictionary() 遍历每个question文件取出所关注的question部分&#xff0c;qs 遍历qs&#xff0c;对每个问题的文本内容进行分词&#xff0c;并将分词结果添加到字典中&…...

BigDecimal中divide方法详解

BigDecimal中divide方法详解 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天&#xff0c;让我们一起深入探讨Java中BigDecimal的divide方法&#xff0c;揭开这个…...

视频推拉流EasyDSS互联网直播/点播平台构建户外无人机航拍直播解决方案

一、背景分析 近几年&#xff0c;国内无人机市场随着航拍等业务走进大众&#xff0c;出现爆发式增长。无人机除了在民用方面的应用越来越多&#xff0c;在其他领域也已经开始广泛应用&#xff0c;比如公共安全、应急搜救、农林、环保、交通 、通信、气象、影视航拍等。无人机使…...

行为型设计模式-策略模式(Strategy Pattern)

策略模式 策略模式&#xff1a;百度百科中引述为&#xff1a;指对象有某个行为&#xff0c;但是在不同的场景中&#xff0c;该行为有不同的实现算法。 策略模式是对算法的包装&#xff0c;是把使用算法的责任和算法本身分割开来&#xff0c;委派给不同的对象管理。策略模式通…...

html中RGB和RGBA颜色表示法

文章目录 RGB什么是RGBRGB颜色模式的取值范围RGB常用颜色对照表 RGBA什么是RGBARGBA颜色模式的取值范围 总结 RGB 什么是RGB RGB是一种颜色空间&#xff0c;其中R代表红色&#xff08;Red&#xff09;、G代表绿色&#xff08;Green&#xff09;、B代表蓝色&#xff08;Blue&a…...

【BEV感知】BEVFormer 融合多视角相机空间特征和时序特征的端到端框架 ECCV 2022

前言 本文分享BEV感知方案中,具有代表性的方法:BEVFormer。 基本思想:使用可学习的查询Queries表示BEV特征,查找图像中的空间特征和先前BEV地图中的时间特征。 它基于Deformable Attention实现了一种融合多视角相机空间特征和时序特征的端到端框架,适用于多种自动驾驶感…...

git拉取hugging face代码失败:443

报错信息&#xff1a;fatal: unable to access http://huggingface.co/THUDM/chatglm2-6b/: OpenSSL SSL_connect: Connection reset by peer in connection to huggingface.co:443 解决方法&#xff1a;&#xff08;127.0.0.1:7890配置为自己的实际代理ip及端口&#xff09; …...

【赠书活动】OpenCV4工业缺陷检测的六种方法

文章目录 前言机器视觉缺陷检测工业上常见缺陷检测方法延伸阅读推荐语 赠书活动 前言 随着工业制造的发展&#xff0c;对产品质量的要求越来越高。工业缺陷检测是确保产品质量的重要环节&#xff0c;而计算机视觉技术的应用能够有效提升工业缺陷检测的效率和精度。 OpenCV是一…...

设计模式之创建型设计模式(一):单例模式 原型模式

单例模式 Singleton 1、什么是单例模式 在软件设计中&#xff0c;单例模式是一种创建型设计模式&#xff0c;其主要目的是确保一个类只有一个实例&#xff0c;并提供一个全局访问点。 这意味着无论何时需要该类的实例&#xff0c;都可以获得相同的实例&#xff0c;而不会创建…...

Amazon CodeWhisperer 在 vscode 的应用

文章作者:旧花阴 CodeWhisperer 是一款可以帮助程序员更快、更安全地编写代码的工具&#xff0c;可以在他们的开发环境中实时提供代码建议和推荐。亚马逊云科技发布的这款代码生成工具 CodeWhisperer 最大的优势就是对于个人用户免费。以在 vscode 为例&#xff0c;演示安装过程…...

【Java】基于fabric8io库操作k8s集群实战(pod、deployment、service、volume)

目录 前言一、基于fabric8io操作pod1.1 yaml创建pod1.2 fabric8io创建pod案例 二、基于fabric8io创建Service&#xff08;含Deployment&#xff09;2.1 yaml创建Service和Deployment2.2 fabric8io创建service案例 三、基于fabric8io操作Volume3.1 yaml配置挂载存储卷3.2 基于fa…...

uniapp微信小程序下载保存图片流到本地,base64

我们在开发时下载图片或文件&#xff0c;地址基本上都是https的格式&#xff0c;下面来说一下后端返回base64的文件流&#xff0c;是如何下载的 必须把返回的流去掉这一部分&#xff1a;data:image/png;base64&#xff0c;否则下载不了 如我自己的流&#xff1a; data:image/…...

华为数通——企业双出口冗余

目标&#xff1a;默认数据全部经过移动上网&#xff0c;联通低带宽。 R1 [ ]ip route-static 0.0.0.0 24 12.1.1.2 目的地址 掩码 下一条 [ ]ip route-static 0.0.0.0 24 13.1.1.3 preference 65 目的地址 掩码 下一条 设置优先级为65 R…...

送奶APP开发:终极指南

您是否有兴趣使用新鲜牛奶和乳制品&#xff0c;但不想每天早上去乳制品店或最近的商店&#xff1f;借助技术&#xff0c;订购日常用品&#xff08;例如杂货和牛奶&#xff09;变得更加简单。 DailyMoo 是最受欢迎的送奶应用&#xff0c;收入达数百万人民币。因此&#xff0c;投…...

Ngnix之反向代理、负载均衡、动静分离

目录 1. Ngnix 1.1 Linux系统Ngnix下载安装 1.2 反向代理 正向代理&#xff08;Forward Proxy&#xff09;&#xff1a; 反向代理&#xff08;Reverse Proxy&#xff09;&#xff1a; 1.3 负载均衡 1.4 动静分离 1. Ngnix Nginx是一个高性能的开源Web服务器&#xff0…...

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

盘古信息PCB行业解决方案:以全域场景重构,激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

IGP(Interior Gateway Protocol,内部网关协议)

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...