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

微信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官方案例基础能力之渲染目标

前言&#xff1a;什么是渲染目标&#xff1f;&#xff08;详见&#xff1a;RenderTarget-渲染目标&#xff09; 在3D计算机图形领域&#xff0c;渲染目标是现代图形处理单元&#xff08;GPU&#xff09;的一个特征&#xff0c;它允许将3D场景渲染到中间存储缓冲区或渲染目标纹理…...

自动控制原理笔记-根轨迹法

目录 一&#xff0c;根轨迹的基本概念 1.根轨迹的基本概念 2.根轨迹方程 3.根轨迹方程的应用 二&#xff0c;根轨迹的绘制规则 【规则一】根轨迹有n条分支&#xff1a; 【规则二】根轨迹对称于实轴&#xff1a; 【规则三】根轨迹的起点和终点&#xff1a; 【规则四】…...

准备半个月,面试5分钟不到就凉了,问的实在太····

从外包出来&#xff0c;没想到竟然死在了另一家厂子 自从加入这家公司&#xff0c;每天都在加班&#xff0c;钱倒是给的不少&#xff0c;所以我也就忍了。没想到12月一纸通知&#xff0c;所有人都不许加班&#xff0c;薪资直降30%&#xff0c;顿时有吃不起饭的赶脚。 好在有个…...

基础IO(三)

软硬链接和动静态库 1.软硬链接2.动态库和静态库2.1理解现象2.2静态库的设计2.3动态库2.4动态库的配置2.5动态库的理解 &#x1f31f;&#x1f31f;hello&#xff0c;各位读者大大们你们好呀&#x1f31f;&#x1f31f; &#x1f680;&#x1f680;系列专栏&#xff1a;【Linux…...

如何用国产DBDesginer软件进行数据库建模设计?

我们在开发软件系统之前都需要进行数据结构的建模设计&#xff0c;传统的都是通过PowerDesiger等国外的软件或直接Excel来进行数据库表结构设计&#xff0c;今天来了解一下如何使用国产软件来进行数据库建模设计 1、首先是注册DBDesigner用户&#xff08; http://dbdesigner.n…...

精选 100 种最佳 AI 工具大盘点

为了应对对精简流程和数据分析日益增长的需求&#xff0c;整合人工智能工具在多个领域变得至关重要。 本文精选了2023年可用的100种最佳人工智能工具&#xff0c;旨在提高您的生产力、创造力和效率。 以下是 2023 年排名前 100 的人工智能工具&#xff1a; Aidoc&#xff1a;A…...

Recognizing Micro-Expression in Video Clip with Adaptive Key-Frame Mining阅读笔记

本文主要贡献 据我们所知&#xff0c;这是第一项旨在将视频剪辑中的信息时间子集的端到端学习与单个网络中的微表情识别相结合的工作。 此外&#xff0c;所提出网络中所有模块的设计都与输入视频剪辑的长度无关。 换句话说&#xff0c;网络容忍各种长度的微表情剪辑。 本文的贡…...

【SpringBoot整合RabbitMQ(上)】

一、简单的生产者-消费者 1.1、创建连接工具类获取信道 public class RabbitMqUtils {public static Channel getChannel() throws IOException, TimeoutException {//创建一个链接工厂ConnectionFactory factory new ConnectionFactory();//工厂IP 链接RabbitMQ的队列facto…...

Linux 设备驱动程序(二)

系列文章目录 Linux 内核设计与实现 深入理解 Linux 内核&#xff08;一&#xff09; 深入理解 Linux 内核&#xff08;二&#xff09; Linux 设备驱动程序&#xff08;一&#xff09; Linux 设备驱动程序&#xff08;二&#xff09; Linux设备驱动开发详解 文章目录 系列文章目…...

性价比提升15%,阿里云发布第八代企业级计算实例g8a和性能增强型实例g8ae

5 月 17 日&#xff0c;2023 阿里云峰会常州站上&#xff0c;阿里云正式发布第八代企业级计算实例 g8a 以及性能增强性实例 g8ae。两款实例搭载第四代 AMD EPYC 处理器&#xff0c;标配阿里云 eRDMA 大规模加速能力&#xff0c;网络延时低至 8 微秒。其中&#xff0c;g8a 综合性…...

Unity VR开发教程 OpenXR+XR Interaction Toolkit 番外(一)用 Grip 键, Trigger 键和摇杆控制手部动画

文章目录 &#x1f4d5;制作手部动画&#x1f4d5;设置 Animation Controller&#x1f4d5;添加触摸摇杆的 Input Action&#x1f4d5;代码部分 在大部分 VR 游戏中&#xff0c;手部的动画通常是由手柄的三个按键来控制的。比如 Grip 键控制中指、无名指、小拇指的弯曲&#xf…...

H.265/HEVC编码原理及其处理流程的分析

H.265/HEVC编码原理及其处理流程的分析 H.265/HEVC编码的框架图&#xff0c;查了很多资料都没搞明白&#xff0c;各个模块的处理的分析网上有很多&#xff0c;很少有把这个流程串起来的。本文的主要目的是讲清楚H.265/HEVC视频编码的处理流程&#xff0c;不涉及复杂的计算过程。…...

数据结构初阶--链表OJⅡ

目录 前言相交链表思路分析代码实现 环形链表思路分析代码实现 环形链表Ⅱ思路分析代码实现 复制带随机指针的链表思路分析代码实现 前言 本篇文章承接上篇博客&#xff0c;继续对部分经典链表OJ题进行讲解 相交链表 先来看题目描述 思路分析 这道题我们还是首先来判断一…...

离职or苟住?

面对不太好的大环境&#xff0c;我们什么时候该离职&#xff0c;什么时候不应该离职呢&#xff1f;分享几个观点&#xff0c;希望对你有所启发。 以前就有大佬讲过&#xff0c;离职无非是两个原因&#xff0c;一是因为薪资不到位&#xff0c;二是因为受委屈了&#xff0c;总之&…...

微服务之以nacos注册中心,以gateway路由转发服务调用实例(第一篇)

实现以nacos为注册中心,网关路由转发调用 项目版本汇总项目初始化新建仓库拉取仓库项目父工程pom初始化依赖版本选择pom文件如下 网关服务构建pom文件启动类配置文件YMLnacos启动新建命名空间配置网关yml(nacos)网关服务启动 用户服务构建pom文件启动类配置文件YML新增url接口配…...

主成分分析(PCA)直观理解与数学推导

近期在完成信息论的作业&#xff0c;发现网上的资料大多是直观解释&#xff0c;对其中的数学原理介绍甚少&#xff0c;并且只介绍了向量降维&#xff0c;而没有介绍向量重构的问题&#xff08;重构指的是&#xff1a;根据降维后的低维向量来恢复原始向量&#xff09;&#xff0…...

什么是合伙企业?普通合伙和有限合伙区别?

1.什么是合伙企业? 合伙企业是指由各合伙人订立合伙协议&#xff0c;共同出资&#xff0c;共同经营&#xff0c;共享收益&#xff0c;共担风险&#xff0c;并对企业债务承担无限连带责任的营利性组织。合伙企业一般无法人资格&#xff0c;不缴纳企业所得税&#xff0c;缴纳个…...

系统结构考点之不明白的点

系统结构考点系列 计算机系统结构的定义计算机组成的定义计算机实现的定义计算系统的定量设计&#xff1f;1. 哈夫曼压缩原理2. Amdahl定律3. cpu性能公式4. 程序访问局部性定理 ​ 这样的题已经不多了&#xff0c;主要是要了解下概念。打下一个好的基础。 2023年4月份成绩已经…...

Android中AIDL的简单使用(Hello world)

AIDL&#xff1a;Android Interface Definition Language&#xff08;Android接口定义语言&#xff09; 作用&#xff1a;跨进程通讯。如A应用调用B应用提供的接口 代码实现过程简述&#xff1a; A应用创建aidl接口&#xff0c;并且创建一个Service来实现这个接口&#xff08…...

ZED使用指南(五)Camera Controls

七、其他 1、相机控制 &#xff08;1&#xff09;选择视频模式 左右视频帧同步&#xff0c;以并排格式作为单个未压缩视频帧流式传输。 在ZED Explorer或者使用API可以改变视频的分辨率和帧率。 &#xff08;2&#xff09;选择输出视图 ZED能以不同的格式输出图像&#xf…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

vscode(仍待补充)

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

【HarmonyOS 5 开发速记】如何获取用户信息(头像/昵称/手机号)

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...