- 综合排序
- 最热优先
- 最新优先
- 来自专栏人生代码
Vue 3 条件渲染
条件渲染 实验介绍 可以使用条件判断的方式来分别渲染。 v-if v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。 最终的渲染结果将不包含 <template> 元素。 我们可以得出结论，v-if 如果给定的值不为 true，DOM 元素不会渲染出来，而 v-show 给定的值如果不为true，实际上是在样式上加了 display: none 影藏了而已，实际上是渲染出来的 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
1.4K20发布于 2020-11-03 - 来自专栏人生代码
Vue 3 列表渲染
列表渲染 实验介绍 列表渲染，其实给人的感觉就是 JavaScript 中的 for 循环，只不过将其提取到 HTML 模板层面了，将其指令化，本质还是 for 循环。 用 v-for 把一个数组对应为一组元素 我们可以用 v-for 指令基于一个数组来渲染一个列表。 key 属性 当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。 如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。 这个默认的模式是高效的，但是「只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出」。
1.8K10发布于 2020-11-03 - 来自专栏李蔚蓬的专栏
Vue3 | 条件渲染 与 列表循环渲染
完整原文地址见简书https://www.jianshu.com/p/695bf35fa466 本文内容提要 条件渲染 v-if与v-show控制渲染的机制的区别 v-if与v-show 各自的适用场景 v-if与v-else的配合 控制渲染 v-if、v-else-if与v-else的配合 控制渲染 列表循环渲染 v-for例程（数组方式） v-for例程（Object方式 -- 注意使用Key值优化v-for的性能 通过数组的变更函数 更新渲染列表UI 通过 直接用新数组替换更新原数组 更新渲染列表UI 通过改变 数组内容（元素） 更新渲染列表UI 循环Object对象，增加Object 列表循环渲染 v-for例程（数组方式）： <! // this.listArray.splice(2,1,'lalala'); // this.listArray.splice(2,3,
1.5K20发布于 2021-03-04 - 来自专栏LET
UE(3)：延迟渲染管线
如上图所示，因为是Windows平台，所以此处是D3D11。 ，InitViews属于数据处理，因此无法体现在渲染流程中，我们简单介绍一下如下的三个主要Pass，理解UE延迟渲染的最简流程。 深度图在渲染中的作用非常大，而且无需Pixel片元阶段，计算成本很小，甚至可以生成一个更高分辨率的深度图，提升渲染质量。 总结 本文介绍了UE延迟渲染中两个核心的Pipeline，一个是Mesh Drawing，一个是Deferred Shading，主要侧重于渲染中的逻辑流程和关键Pass的生成结果，理解渲染中如何利用材质和着色器的大概步骤 参考资料 [1] 剖析虚幻渲染体系（03）- 渲染机制: https://www.cnblogs.com/timlly/p/14588598.html
2.3K40编辑于 2022-12-22 - 来自专栏muller的测试分享
Vue3 - 条件渲染
v-if 条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。 不同之处在于 v-show 会在 DOM 渲染中保留该元素；v-show 仅切换了该元素上名为 display 的 CSS 属性。 v-show 不支持在 <template> 元素上使用 v-show不能和 v-else 搭配使用### v-if VS v-show v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销
91800编辑于 2022-12-04 - 来自专栏ArcGIS JS API开发
【React基础-3】元素渲染
元素渲染 我们将一个react元素渲染到页面的话，是要通过ReactDOM的render()方法来渲染的，例如下面的代码： import React from 'react'; import ReactDOM ')); 上述代码就是将element这个元素通过ReactDOM的render()方法渲染到了页面上。 render()方法需要传入两个参数：第一个参数是要渲染的元素，第二个参数是将要渲染的元素被渲染到的dom节点。 div中的，但是如果你需要在其他的地方另外渲染另一个react页面元素或者集成一个已有的react应用的话，你可以再次调用这个方法，第二个参数传入另一个div标签元素。 仅仅是渲染上一次和这次新传进去的元素中间变化了的部分，也就是上述例子中的”时间”这部分一直在改变，但是其余的部分并没有发生变化，这是为什么呢？
99520编辑于 2022-02-21 - 来自专栏muller的测试分享
Vue3 - 列表渲染
Vue 列表渲染 v-for 我们可以使用 v-for 指令基于一个数组来渲染一个列表。 text:"重庆市" } ] } } } </script> <template> <main>
<h3> 列表渲染</h3>- {{ item.text }}
42800编辑于 2022-12-04来自专栏逍遥剑客的游戏开发Nebula3的渲染流程
在说流程之前, 有必要先看一下N3的Frame子系统: ? 每帧的渲染过程都写进了配置文件, 默认使用的是"frame/win32/dx9default.xml", 阴影还有另外一套. <? > <Nebula3 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../.. Shapes"/> <Batch shader="b_empty" type="Text"/> </PostEffect> </FrameShader> </Nebula3> FramePass包装了所有要渲染到RenderTarget的所有3D渲染相关的东西, 由FrameBatch组成. 一个Graphics View的作用就是把一个Stage通过CameraEntity渲染到RenderTarget上. 一个Stage可以有多个View, 而一个View也可以依赖另一个.
62020发布于 2019-02-20来自专栏python33D图形渲染管线
3D图形渲染管线 什么是渲染（Rendering） 渲染简单的理解可能可以是这样：就是将三维物体或三维场景的描述转化为一幅二维图像，生成的二维图像能很好的反应三维物体或三维场景（如图1）： ? 图1：Rendering ---- 什么是渲染管线 渲染管线也称为渲染流水线，是显示芯片内部处理图形信号相互独立的的并行处理单元。一个流水线是一序列可以并行和按照固定顺序进行的阶段。 正如图3所示，有许多种方法来制定几何图元。 ? 图2：图形硬件渲染管线 ? 图3：几何图形的类型 ---- 一.顶点变换（Vertex Transformation）： 顶点变换是图形硬件渲染管线种的第一个处理阶段。顶点变换在每个顶点上执行一系列的数学操作。 《OpenGL编程指南》 3. 网络 http://blog.sina.com.cn/s/blog_6ad33d3501014pi1.html
2.4K20发布于 2020-01-14来自专栏小柔博客园3D图形渲染技术
，这个叫做线框渲染 投射的灵感：两种投影方法 推荐文章： https://zhuanlan.zhihu.com/p/473031788 总的来说就是把一个3D图形移动到2D的坐标系上，中心对应的坐标系的原点 但是四个点就不一定了、 如果是两个点那么不够定义平面，只能够定义线段；如果是四个点那么可能定义的就不仅仅只有一个平面了，所以3是个完美的数字 填充图形算法 扫面线渲染 线框渲染虽然很酷，但是3D 如果像素在多边形内部直接填充颜色；如果多边形划过像素，那么颜色就会浅一些 遮挡的渲染算法 在3D场景中有很多的多边形，但是只有一部分能看见，因为其他的被遮挡住了。 排序算法（画家算法） 最简单的处理方法 从远到近排列，从远到近渲染，这叫画家算法，因为画家也是先画背景再画更近的 东西 步骤 第一步，就是从远到近进行排序（A黄色,B蓝色,C绿色 三个三角形的距离 场景分解成多个小部分，然后进行并行渲染，而不是按顺序渲染。
2.5K20编辑于 2022-12-01来自专栏开源心路3D渲染引擎介绍
背景 专业处理视觉呈现的渲染库。 UE4是3A游戏开发者引擎的首选，它以逼真的渲染效果著称。很多大型的3A游戏都采用UE4来开发，比如腾讯的《和平精英》等。 国民3D引擎，这个称号说明了Unity在3D引擎的市场地位，中小型的游戏公司做3D游戏，基本都是用Unity, 很多大公司的游戏也用Unity, 比如《王者荣耀》, 国外什么情形呢？ 总结一下Unity的特点: 能制作精美的3D游戏画面，和定制渲染管线，画面效果不如UE4。 能制作各种类型的3D游戏上线，每种类型的游戏都被商业项目验证过。 缺点 可视化和渲染效果不如游戏引擎，不过国内有一些厂家也定制了渲染管线，提升了渲染效果。
1.7K10编辑于 2023-06-30来自专栏逍遥剑客的游戏开发Nebula3渲染层: Graphics
因为Mangalore的图形子系统跟Nebula2的完全分界线从Nebula3中移除了, 很多设想都可以用更少的代码和交互来实现. 这本应是Nebula3层次结构中更高级的东西, 但是我选择了这个位置, 因为这是游戏跟渲染相关通信最少的一部分代码. 一个Model资源是一个完全的3D模型, 包括几何体, 材质, 动画, 层级变换等…(后面会提到). Nebula3的光源属性还没有最终确定, 但是我的目标是一个相对灵活地近似(最后一个光源不会超过几个shader参数). Stage和View是Nebula3图形子系统新增的内容. 这对于只需要渲染一个世界到帧缓存(frame buffer)的情况来说还是不错的. 但许多游戏程序需要更复杂的渲染, 如在GUI中渲染一个使用单独灯光的3D对象, 而它又跟其它的图形世界是隔离的.
51720编辑于 2022-01-11来自专栏软件工程师MichaelVue3中的条件渲染
1.v-showtips:在Vue3中使用v-show控制的元素的显示与隐藏v-show里面接收的数据会自动转化为布尔值若v-show为false,则被指令元素变为display:none代码实例：<! device-width, initial-scale=1.0"> <title>methods test</title> <script src="https://unpkg.com/vue@<em>3</em>" Vue.createApp({ data(){ return { "content":"Vue3" } } }).mount('#michael') </script> </body></html>2.v-iftips：Vue3中使用 v-if对元素进行条件渲染v-if可以接收任何数据转化成布尔值进行渲染和不渲染v-if比v-show使用起来更加消耗性能资源v-if可以进行v-else-if和v-else指令的拓展v-if的拓展指令必须相邻
1.7K50编辑于 2022-09-03来自专栏FlutterFlutter 中渲染3D 模型
原文地址：https://medium.com/flutterdevs/explore-model-viewer-in-flutter-e5988edbfe66 3D模型是具有3个测量长度，宽度和深度的模型 **我们将实现一个模型查看器演示程序，并在您的flutter应用程序中使用model_viewer包以glTF和GLB格式显示3D模型。 地址：https://pub.dev/packages/model_viewer 介绍 Flutter小部件，用于在glTF和GLB设计中提供交互式3D模型。 3D模型显示3D图片。 该演示视频展示了如何在Flutter中创建模型查看器。它显示了如何在flutter应用程序中使用model_viewer包来运行模型查看器。 参数 **src：**此参数用于3D模型的URL或路径。此参数是必需的。仅支持glTF / GLB型号。
27.7K20发布于 2021-04-22来自专栏游戏开发之旅（一） 3D图形渲染管线
（一） 3D图形渲染管线（学习Shader的基础是计算机图形学） 正文 什么是渲染（Rendering） 渲染简单的理解可能可以是这样：就是将三维物体或三维场景的描述转化为一幅二维图像 这些操作是OpenGL和Direct3D的一个标准组成部分。在这个阶段，隐藏面通过一个被称为深度测试的过程而消除。其它一些效果，例如混合和基于模板的阴影也发生在这个阶段。 图5：标准OpenGL和Direct3D光栅操作 ---- 五.形象化图形流水线 图6描写了图形流水线的各个阶段。在本图中，两个三角形被光栅化了。整个过程从顶点的变换和着色开始。 在各种图形学的书中，渲染管线主要分为三个阶段：应用程序阶段、几何阶段、光栅阶段。 1，应用程序阶段。 所以这个转换过程事实上由三步组成： （1），用透视变换矩阵把顶点从视锥体变换到CVV中； （2），在CVV内进行剪裁； （3），屏幕映射：将经过前两步得到的坐标映射到屏幕坐标系上。
2K30发布于 2019-12-02来自专栏前端精读评论3. 精读《前后端渲染之争》
明确三个概念：「后端渲染」指传统的 ASP、Java 或 PHP 的渲染机制；「前端渲染」指使用 JS 来渲染页面大部分内容，代表是现在流行的 SPA 单页面应用；「同构渲染」指前后端共用 JS，首次渲染时使用 3 精读 本次提出独到观点的同学有：@javie007 @杨森 @流形 @camsong @Turbe Xue @淡苍 @留影 @FrankFang @alcat2008@xile611 @twobin 大家对前端和后端渲染的现状基本达成共识。即前端渲染是未来趋势，但前端渲染遇到了首屏性能和SEO的问题。对于同构争议最多，在此我归纳一下。 然而近3年过去了，很多产品逐渐从全栈同构的理想化逐渐转到首屏或部分同构。让我们再一次思考同构的优点真是优点吗？ 3 总结 我们赞成客户端渲染是未来的主要方向，服务端则会专注于在数据和业务处理上的优势。但由于日趋复杂的软硬件环境和用户体验更高的追求，也不能只拘泥于完全的客户端渲染。
1.2K20编辑于 2022-03-14什么是云渲染？3分钟读懂高效渲染新范式！
云渲染的核心逻辑，是借助远端大规模服务器集群的算力，替代本地设备完成高负载的渲染计算。这种模式能实现多任务并行加速，让影视动画、建筑设计等对渲染效率要求极高的行业，彻底摆脱算力瓶颈。 面对包含数十个子任务的大型项目，本地设备往往需要逐个渲染，耗时漫长；而云渲染可一次性启动所有任务，大幅缩短交付周期。尤其在紧急出图、客户临时改稿等场景下，云渲染能有效规避因效率不足导致的项目风险。 以主流工具为例，从3ds Max 2022、Maya到V-Ray 5.0、Corona 6.0，云渲染平台已实现全流程兼容。 3. 释放本地资源，降低设备损耗 本地渲染往往会耗尽设备算力，导致系统卡顿，更会加速硬件老化——长期高负载运行可能引发散热故障，甚至损坏硬件，无形中增加了设备维护成本。 而云渲染将计算任务转移至云端后，本地设备的压力将大幅降低。用户提交任务后，可直接关闭渲染软件甚至设备，既减少了硬件损耗，又能将本地算力用于创意设计工作，实现 “创作与渲染” 双线并行。4.
21020编辑于 2026-03-06来自专栏LET谈谈3D Tiles(1)：渲染调度
3D Tiles简单说就是具备LOD能力的glTF。有了数据首先是提供API可以渲染，保证用起来，下一步就要了解该数据规范的具体特点，比如倾斜，矢量，点云，OSM等支持情况，项目实施和风险评估等。 本文主要集中在渲染调度层面。看完本文可能会觉得思路很简单。在实际应用中有很多细节，比如浏览时各种操作的差异，并发量，内存和显存管理，异步传输和Workers线程等等各种调优。 ，和之前glTF或primitive一样，基于状态的驱动流程： 如上是调度管理的逻辑，四个函数的作用大概如下： processTiles 处理Tile对应的DrawCommand状态，判断一些半透明等渲染顺序 selectTiles 请求具体的b3dm数据，不同Type根据对应的类来完成数据的下载，根据LOD策略决定哪些Tile进入渲染队列。 同时Cesium提供了渲染3D Tiles的接口，稍显不足的就是还没有成熟的，免费的数据生成工具，可以从osg转为3d tiles，这是目前最大的瓶颈。
3.3K60发布于 2018-06-20来自专栏进击的多媒体开发OpenGL 3D 模型加载和渲染
这时候就可以使用 OpenGL 来加载 3D 模型。先使用 3D 建模工具构建物体，然后再将物体导出成特定的文件格式，最终通过 OpenGL 渲染模型。 例如如下的 3D 模型文件图像： ? 14/12/11 22... 23f 5/4/5 7/3/7 3/1/3 24# 576 faces 25g "#" 开头的行表示注释，加载过程中可以忽略 “v” 开头的行用于存放顶点坐标，后面三个数表示一个顶点的 /1 14/12/11 13/4/12 如上数据代表了三个顶点，其中三角形 3 个顶点坐标来自 1、14、13 号以 "v" 开头的行， 3 个顶点的纹理坐标来自 10、12、4 号以 “vt” 开头的行 ，3 个顶点的法向量来自 1、11、12 号以 “vn” 开头的行。 加载 Obj 模型文件 明白了 Obj 模型文件代表的含义，接下来把它加载并用 OpenGL 进行渲染。
3.7K21发布于 2019-07-25来自专栏怪兽怪秀3D PCB 效果图 渲染
利用AD导出PDF 3D格式，在keyshot中进行渲染，与其他方法不同的是，此方法简单快速，且包含了走线与铜皮和清晰的丝印图 工具或材料 AD（或LCEDA） keyshot 一个带3D封装图的PCB 文件 具体步骤 1 AD端操作 在PCB界面，点击 文件->导出->PDF 3D，文件选择.obj 格式，然后选择如下参数后点击导出。 （3）板材设置 在左下角云库 中搜索PCB，并下载到本地库中，将下载的PCB材质拖到PCB板材中（场景中的core） （4）丝印设置 选中丝印（silk_t），右键打开材质编辑，材质选择油漆即可 （5 ：210，167，23 其他材质可以按照自己的喜好选择 （6）增加背景 编辑->添加几何图形->平面 然后对平面参数设置，使PCB位于平面上，将材质->Wood中自己喜欢的材质拖到背景平面中 （7）渲染输出 一切参数都调整好后，点击渲染，尽量将分辨率设置的大一点，这样图片更加清晰 至此就完成渲染啦，今后可以发aB ility**格** 更高的PCB图片啦。
1.7K20编辑于 2022-10-04
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号