微信xr-frame官方案例基础能力之渲染目标
前言:什么是渲染目标?(详见:RenderTarget-渲染目标)
在3D计算机图形领域,渲染目标是现代图形处理单元(GPU)的一个特征,它允许将3D场景渲染到中间存储缓冲区或渲染目标纹理(RTT),而不是帧缓冲区或后缓冲区。然后可以通过像素着色器操纵此RTT ,以便在显示最终图像之前将其他效果应用于最终图像。————来自维基百科
渲染目标就是一个缓冲区,(除了back frame buffer 和screen frame buffer之外的缓冲区)用来记录渲染后的输出的结果,而不直接将帧缓冲绘制到屏幕。而是将其应用到别处。
离屏渲染,就可以通过渲染目标实现的。
1.资源加载
<xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded"><xr-asset-material asset-id="standard-mat" effect="standard" /><xr-asset-load type="gltf" asset-id="miku" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/miku.glb" /><xr-asset-render-texture asset-id="rt" width="2048" height="1024" /></xr-assets>
注:定义一个资源:xr-asset-render-texture,属性需要id和高宽(详见:渲染目标)
<xr-asset-render-texture asset-id="rt" width="2048" height="1024" />
2.添加物体
<xr-node ><xr-mesh id="cube" node-id="mesh-cube" position="-1 0.5 1.5" scale="1 1 1" rotation="0 45 0" geometry="cube" material="standard-mat" uniforms="u_baseColorFactor:0.298 0.764 0.85 1" /><xr-gltf model="miku" position="0 1 0" scale="0.08 0.08 0.08" rotation="0 180 0" anim-autoplay /></xr-node>
3.添加相机
<xr-cameraposition="0 1 6" clear-color="0.925 0.925 0.925 1"target="rt-camera-target" render-target="rt" /><xr-cameraposition="0 6 6" clear-color="0.925 0.925 0.925 1"target="mesh-plane" camera-orbit-control=""></xr-camera>
4.添加灯光
<xr-node node-id="lights"><xr-light type="ambient" color="1 1 1" intensity="1" /><xr-light type="directional" rotation="40 170 0" color="1 1 1" intensity="3" /></xr-node>
整体代码以及效果:(部分代码来源于:微信开放文档)
1.wxml部分:
<xr-scene id="xr-scene" bind:ready="handleReady"><xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded"><xr-asset-material asset-id="standard-mat" effect="standard" /><xr-asset-load type="gltf" asset-id="miku" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/miku.glb" /><xr-asset-render-texture asset-id="rt" width="2048" height="1024" /></xr-assets><xr-node ><xr-mesh id="cube" node-id="mesh-cube" position="-1 0.5 1.5" scale="1 1 1" rotation="0 45 0" geometry="cube" material="standard-mat" uniforms="u_baseColorFactor:0.298 0.764 0.85 1" /><xr-gltf model="miku" position="0 1 0" scale="0.08 0.08 0.08" rotation="0 180 0" anim-autoplay /></xr-node><xr-node ><xr-mesh node-id="mesh-plane" position="0 0 -6" rotation="-90 0 0" scale="16 1 12" geometry="plane" material="standard-mat"uniforms="u_baseColorMap:render-rt" states="cullOn:false" /></xr-node><xr-node node-id="rt-camera-target" position="0 1 0"></xr-node><xr-cameraposition="0 1 6" clear-color="0.925 0.925 0.925 1"target="rt-camera-target" render-target="rt" /><xr-cameraposition="0 6 6" clear-color="0.925 0.925 0.925 1"target="mesh-plane" camera-orbit-control=""></xr-camera><xr-node node-id="lights"><xr-light type="ambient" color="1 1 1" intensity="1" /><xr-light type="directional" rotation="40 170 0" color="1 1 1" intensity="3" /></xr-node>
</xr-scene>
- js部分
Component({data: {loaded: false},lifetimes: {},methods: {handleReady({detail}) {const xrScene = this.scene = detail.value;console.log('xr-scene', xrScene);},handleAssetsProgress: function({detail}) {console.log('assets progress', detail.value);},handleAssetsLoaded: function({detail}) {console.log('assets loaded', detail.value);this.setData({loaded: true});}} }) - 效果:

相关文章:
微信xr-frame官方案例基础能力之渲染目标
前言:什么是渲染目标?(详见:RenderTarget-渲染目标) 在3D计算机图形领域,渲染目标是现代图形处理单元(GPU)的一个特征,它允许将3D场景渲染到中间存储缓冲区或渲染目标纹理…...
自动控制原理笔记-根轨迹法
目录 一,根轨迹的基本概念 1.根轨迹的基本概念 2.根轨迹方程 3.根轨迹方程的应用 二,根轨迹的绘制规则 【规则一】根轨迹有n条分支: 【规则二】根轨迹对称于实轴: 【规则三】根轨迹的起点和终点: 【规则四】…...
准备半个月,面试5分钟不到就凉了,问的实在太····
从外包出来,没想到竟然死在了另一家厂子 自从加入这家公司,每天都在加班,钱倒是给的不少,所以我也就忍了。没想到12月一纸通知,所有人都不许加班,薪资直降30%,顿时有吃不起饭的赶脚。 好在有个…...
基础IO(三)
软硬链接和动静态库 1.软硬链接2.动态库和静态库2.1理解现象2.2静态库的设计2.3动态库2.4动态库的配置2.5动态库的理解 🌟🌟hello,各位读者大大们你们好呀🌟🌟 🚀🚀系列专栏:【Linux…...
如何用国产DBDesginer软件进行数据库建模设计?
我们在开发软件系统之前都需要进行数据结构的建模设计,传统的都是通过PowerDesiger等国外的软件或直接Excel来进行数据库表结构设计,今天来了解一下如何使用国产软件来进行数据库建模设计 1、首先是注册DBDesigner用户( http://dbdesigner.n…...
精选 100 种最佳 AI 工具大盘点
为了应对对精简流程和数据分析日益增长的需求,整合人工智能工具在多个领域变得至关重要。 本文精选了2023年可用的100种最佳人工智能工具,旨在提高您的生产力、创造力和效率。 以下是 2023 年排名前 100 的人工智能工具: Aidoc:A…...
Recognizing Micro-Expression in Video Clip with Adaptive Key-Frame Mining阅读笔记
本文主要贡献 据我们所知,这是第一项旨在将视频剪辑中的信息时间子集的端到端学习与单个网络中的微表情识别相结合的工作。 此外,所提出网络中所有模块的设计都与输入视频剪辑的长度无关。 换句话说,网络容忍各种长度的微表情剪辑。 本文的贡…...
【SpringBoot整合RabbitMQ(上)】
一、简单的生产者-消费者 1.1、创建连接工具类获取信道 public class RabbitMqUtils {public static Channel getChannel() throws IOException, TimeoutException {//创建一个链接工厂ConnectionFactory factory new ConnectionFactory();//工厂IP 链接RabbitMQ的队列facto…...
Linux 设备驱动程序(二)
系列文章目录 Linux 内核设计与实现 深入理解 Linux 内核(一) 深入理解 Linux 内核(二) Linux 设备驱动程序(一) Linux 设备驱动程序(二) Linux设备驱动开发详解 文章目录 系列文章目…...
性价比提升15%,阿里云发布第八代企业级计算实例g8a和性能增强型实例g8ae
5 月 17 日,2023 阿里云峰会常州站上,阿里云正式发布第八代企业级计算实例 g8a 以及性能增强性实例 g8ae。两款实例搭载第四代 AMD EPYC 处理器,标配阿里云 eRDMA 大规模加速能力,网络延时低至 8 微秒。其中,g8a 综合性…...
Unity VR开发教程 OpenXR+XR Interaction Toolkit 番外(一)用 Grip 键, Trigger 键和摇杆控制手部动画
文章目录 📕制作手部动画📕设置 Animation Controller📕添加触摸摇杆的 Input Action📕代码部分 在大部分 VR 游戏中,手部的动画通常是由手柄的三个按键来控制的。比如 Grip 键控制中指、无名指、小拇指的弯曲…...
H.265/HEVC编码原理及其处理流程的分析
H.265/HEVC编码原理及其处理流程的分析 H.265/HEVC编码的框架图,查了很多资料都没搞明白,各个模块的处理的分析网上有很多,很少有把这个流程串起来的。本文的主要目的是讲清楚H.265/HEVC视频编码的处理流程,不涉及复杂的计算过程。…...
数据结构初阶--链表OJⅡ
目录 前言相交链表思路分析代码实现 环形链表思路分析代码实现 环形链表Ⅱ思路分析代码实现 复制带随机指针的链表思路分析代码实现 前言 本篇文章承接上篇博客,继续对部分经典链表OJ题进行讲解 相交链表 先来看题目描述 思路分析 这道题我们还是首先来判断一…...
离职or苟住?
面对不太好的大环境,我们什么时候该离职,什么时候不应该离职呢?分享几个观点,希望对你有所启发。 以前就有大佬讲过,离职无非是两个原因,一是因为薪资不到位,二是因为受委屈了,总之&…...
微服务之以nacos注册中心,以gateway路由转发服务调用实例(第一篇)
实现以nacos为注册中心,网关路由转发调用 项目版本汇总项目初始化新建仓库拉取仓库项目父工程pom初始化依赖版本选择pom文件如下 网关服务构建pom文件启动类配置文件YMLnacos启动新建命名空间配置网关yml(nacos)网关服务启动 用户服务构建pom文件启动类配置文件YML新增url接口配…...
主成分分析(PCA)直观理解与数学推导
近期在完成信息论的作业,发现网上的资料大多是直观解释,对其中的数学原理介绍甚少,并且只介绍了向量降维,而没有介绍向量重构的问题(重构指的是:根据降维后的低维向量来恢复原始向量)࿰…...
什么是合伙企业?普通合伙和有限合伙区别?
1.什么是合伙企业? 合伙企业是指由各合伙人订立合伙协议,共同出资,共同经营,共享收益,共担风险,并对企业债务承担无限连带责任的营利性组织。合伙企业一般无法人资格,不缴纳企业所得税,缴纳个…...
系统结构考点之不明白的点
系统结构考点系列 计算机系统结构的定义计算机组成的定义计算机实现的定义计算系统的定量设计?1. 哈夫曼压缩原理2. Amdahl定律3. cpu性能公式4. 程序访问局部性定理 这样的题已经不多了,主要是要了解下概念。打下一个好的基础。 2023年4月份成绩已经…...
Android中AIDL的简单使用(Hello world)
AIDL:Android Interface Definition Language(Android接口定义语言) 作用:跨进程通讯。如A应用调用B应用提供的接口 代码实现过程简述: A应用创建aidl接口,并且创建一个Service来实现这个接口(…...
ZED使用指南(五)Camera Controls
七、其他 1、相机控制 (1)选择视频模式 左右视频帧同步,以并排格式作为单个未压缩视频帧流式传输。 在ZED Explorer或者使用API可以改变视频的分辨率和帧率。 (2)选择输出视图 ZED能以不同的格式输出图像…...
RestClient
什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端,它允许HTTP与Elasticsearch 集群通信,而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级ÿ…...
华为云AI开发平台ModelArts
华为云ModelArts:重塑AI开发流程的“智能引擎”与“创新加速器”! 在人工智能浪潮席卷全球的2025年,企业拥抱AI的意愿空前高涨,但技术门槛高、流程复杂、资源投入巨大的现实,却让许多创新构想止步于实验室。数据科学家…...
地震勘探——干扰波识别、井中地震时距曲线特点
目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波:可以用来解决所提出的地质任务的波;干扰波:所有妨碍辨认、追踪有效波的其他波。 地震勘探中,有效波和干扰波是相对的。例如,在反射波…...
ssc377d修改flash分区大小
1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...
FastAPI 教程:从入门到实践
FastAPI 是一个现代、快速(高性能)的 Web 框架,用于构建 API,支持 Python 3.6。它基于标准 Python 类型提示,易于学习且功能强大。以下是一个完整的 FastAPI 入门教程,涵盖从环境搭建到创建并运行一个简单的…...
Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式
点一下关注吧!!!非常感谢!!持续更新!!! 🚀 AI篇持续更新中!(长期更新) 目前2025年06月05日更新到: AI炼丹日志-28 - Aud…...
服务器--宝塔命令
一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行! sudo su - 1. CentOS 系统: yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...
Python Ovito统计金刚石结构数量
大家好,我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构,但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法,可以持续统计各步的金刚石结构,具体代码如下: from ovito…...
Golang——6、指针和结构体
指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...
LRU 缓存机制详解与实现(Java版) + 力扣解决
📌 LRU 缓存机制详解与实现(Java版) 一、📖 问题背景 在日常开发中,我们经常会使用 缓存(Cache) 来提升性能。但由于内存有限,缓存不可能无限增长,于是需要策略决定&am…...
