微信xr-frame官方案例基础能力之渲染目标

news2024/11/23 20:18:27

前言:什么是渲染目标?(详见: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-camera
    position="0 1 6" clear-color="0.925 0.925 0.925 1"
    target="rt-camera-target" render-target="rt" 
  />

  <xr-camera
    position="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-camera
    position="0 1 6" clear-color="0.925 0.925 0.925 1"
    target="rt-camera-target" render-target="rt" 
  />
  <xr-camera
    position="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});
        }
      }
    })

  • 效果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/544236.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

视频压缩存储可以给油田带来什么好处?

航天安网监控视频压缩存储解决方案可以在不改变帧率、不改变视频分辨率、不改变时长、不损失特征点、不影响后续AI智能分析等条件下实现高清视频平均10倍以上无损压缩&#xff0c;压缩后视频文件大小平均为原文件大小的1/10&#xff0c;针对动态场景较少的环境&#xff0c;例如…

【Python】Python高校图书馆书籍管理系统(登录、注册、功能源码设计)【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化 &#x1f449;专__注&#x1f448;&#xff1a;专注主流机器人、人工智能等相关领域的开发、…

ipa如何安装到iphone

这里以目前很火的奥普appuploader为例&#xff0c;先打开 appuploader&#xff0c;把 iPhone 用原装数据线连接&#xff0c;点击左侧的 appuploader一栏&#xff0c;会在右窗格中看到机器的相关信息&#xff0c;可以看到是否越狱一栏显示“是”。 接下来请点击左侧的“程序库”…

《汇编语言》- 读书笔记 - 实验1 查看 CPU 和内存,用机器指令和汇编指令编程

《汇编语言》- 读书笔记 - 实验1 查看 CPU 和内存&#xff0c;用机器指令和汇编指令编程 实验 1 查看 CPU 和内存&#xff0c;用机器指令和汇编指令编程1. 预备知识: Debug 的使用r 修改或显示寄存器的值d 查看内存数据e 编辑内存中指定地址的内容u 显示代码t 单步执行一条指令…

oa系统是什么?oa系统怎么用?

阅读本文你将了解&#xff1a;1.oa系统是什么&#xff1b;2.oa系统怎么用&#xff08;oa系统功能模块&#xff09;3.oa系统作用&#xff08;案例&#xff09; 一、oa系统是什么 oa系统全称为Office Automation&#xff0c;即办公自动化系统。它是一种专门为企业和机构的日常办…

Redis和数据库数据不一致该怎么做?

Redis和数据库数据不一致该怎么做&#xff1f; 答&#xff1a; 情景&#xff1a;redis作为缓存&#xff0c;当我们修改数据库的数据的时候&#xff0c;会出现Mysql和redis的数据不一致的问题 如图&#xff0c;当修改更新MYSQL数据为9后&#xff0c;还没来得及取更新redis&am…

linux系列小知识-手把手教你SSH怎么链接

目录 项目场景&#xff1a; 问题描述 原因分析&#xff1a; 解决方案&#xff1a; 项目场景&#xff1a; 应用场景&#xff1a;在机器装机后&#xff0c;如果没有显示&#xff0c;有没有串口&#xff0c;通常很难区操作调试&#xff0c;本文总结一篇通过搭建SSH链接去为调试…

操作符讲解2---C语言

目录 前言&#xff1a; 1.赋值操作符 2.单目操作符 2.1取地址操作符 2.2sizeof操作符 2.3和-- 3.关系操作符 4.条件表达式和逗号表达式 4.1条件表达式 4.2逗号表达式 5.下标引用&函数调用&结构访问 6.表达式与语句的关系 ❤博主CSDN:啊苏要学习 ▶专栏分类…

跨境电商卖家,如何运营Facebook?

随着跨境电商的兴起&#xff0c;越来越多的卖家开始运营Facebook&#xff0c;以吸引更多的潜在客户和提高品牌知名度。那么&#xff0c;作为跨境电商卖家&#xff0c;我们可以在Facebook上做些什么呢&#xff1f; 首先&#xff0c;我们可以通过Facebook建立一个专业的品牌页面&…

测试岗人员转型已是必然选择:我的十年自动化测试经验分享

目录 做测试十多年&#xff0c;有不少人问过我下面问题&#xff1a; 第一阶段&#xff1a;初级测试工程师 第二阶段&#xff1a;中级测试工程师 第三阶段&#xff1a;高级测试工程师/测试组负责人 第四阶段&#xff1a; 测试专家/测试经理 升华阶段(老手后5年—10年) 提…

搞怪独特的520文案表情包分享来啦

1. 你宁愿做狗也不和我表白&#xff0c;这个仇我记下了。 2. 这个夏天我不再是单身狗&#xff0c;请叫我热狗。 3. 我以为520是什么日子呢&#xff0c;特意去查了下史书&#xff0c;520是农历的四月初六潘金莲毒死武大郎的日子。 4. 520 你跟她过吧&#xff0c;我没借到钱&…

经常说的数据仓库,是如何存储数据的

一、 什么是数据仓库&#xff1f; 数据仓库(Data Warehouse)&#xff0c;简称DW。数据仓库顾名思义&#xff0c;是⼀个很⼤的数据存储集合&#xff0c;出于企业的分析性报告和决策⽀持⽬的⽽创建&#xff0c;对多样的业务数据进⾏筛选与整合。它能为企业提供⼀定的BI&#xff…

CVPR 2023 | EfficientViT:让ViT在多个部署场景实现实时推理

随着近两年来对视觉Transformer模型&#xff08;ViT&#xff09;的深入研究&#xff0c;ViT的表达能力不断提升&#xff0c;并已经在大部分视觉基础任务 (分类&#xff0c;检测&#xff0c;分割等) 上实现了大幅度的性能突破。 然而&#xff0c;很多实际应用场景对模型实时推理…

从零入门激光SLAM(十)——刚体位姿表达与优化

大家好呀&#xff0c;我是一个SLAM方向的在读博士&#xff0c;深知SLAM学习过程一路走来的坎坷&#xff0c;也十分感谢各位大佬的优质文章和源码。随着知识的越来越多&#xff0c;越来越细&#xff0c;我准备整理一个自己的激光SLAM学习笔记专栏&#xff0c;从0带大家快速上手激…

django ORM框架 第三章 关联表的数据创建与查询

一、背景&#xff1a; 创建一组一对多的表。 # 班级表 class Class(models.Model):class_id models.IntegerField(primary_keyTrue, verbose_name班级id, help_text班级id)class_name models.CharField(max_length20,verbose_name班级名称, help_text班级名称)# 学生信息表 …

Centos虚拟机与window共享文件夹

1.安装完centos系统后&#xff0c;查看是否安装好VMware tools 如果未安装&#xff0c;请参考此文章安装&#xff1a; CentOS安装VMwareTools_centos安装vmware tools_Sunqk5665的博客-CSDN博客 2.添加共享文件夹 3.使用vmware-hgfsclient查看共享文件夹。本例中为share 4. 挂…

5.1 标准IO介绍及缓冲区

目录 标准I/O介绍 文件的概念和类型 标准I/O-流&#xff08;可理解为数据&#xff09; 流的缓冲类型 标准I/O——stdin,stdout,stderr 标准I/O介绍 在寄存器中的输入输出标准&#xff0c;在任何系统上可运行&#xff0c;是一系列的接口&#xff0c;所以被称为标准IO lin…

学会ECharts 数据缩放组件

本文首发自「慕课网」&#xff08;imooc.com&#xff09;&#xff0c;想了解更多IT干货内容&#xff0c;程序员圈内热闻&#xff0c;欢迎关注"慕课网"或慕课网公众号&#xff01; 作者&#xff1a;范文杰_fe|慕课网讲师 在一个数据图表中&#xff0c;可能由于数据所表…

Mtlab基础(十):极限的求解

在做研究的过程中,需要涉及到极限的求解,面对简单的极限大家都能够轻松解决,但是当面临复杂的问题时,传统的差分进化算法就难以解决了。 对于求解极限,Matlab提供了非常好的工具**limit**,具体的使用方法: limit(f,v,a)-------------------------------------------…

RFID在空调装配中的作用

RFID在空调装配中的作用 随着物联网和射频识别技术 (RFID) 的发展&#xff0c;越来越多的应用开始使用 RFID 技术来提高生产效率和产品质量。在空调装配过程中&#xff0c;RFID 技术可以发挥重要作用。 RFID 技术可以帮助空调制造商提高装配效率。使用 RFID 技术&#xff0c;…