HTML5 的 SVG 是不是具有隐藏的表面去除功能/库？ [关闭]

Posted 2023-03-06

【中文标题】HTML5 的 SVG 是不是具有隐藏的表面去除功能/库？ [关闭]

【英文标题】：Does HTML5's SVG has a hidden surface removal feature/library? [closed]HTML5 的 SVG 是否具有隐藏的表面去除功能/库？ [关闭]

【发布时间】：2017-04-28 11:01:35

【问题描述】：

因此，在 html5 中，我了解 SVG 与 Canvas 的不同之处在于 SVG 是声明性的，而 Canvas 是必不可少的。我突然想到，可以使用更好的声明性技术来定义形状，然后声明一个视点，让浏览器找出要删除的隐藏表面。

在谷歌上搜索后我没有找到太多，有这个链接

https://css-tricks.com/almanac/properties/b/backface-visibility/

但这并没有多大帮助。

是否有一个 javascript 库可以在新的扩展标准 brewing 上进行隐藏表面移除？

作为一个示例用例，我想将一个立方体定义为 12 条边，在表面上声明这样的不透明度（以免对其进行线框化）并让浏览器图不显示“背面”表面。

【问题讨论】：

你应该只从后往前渲染。

@Bálint，太巧妙了！但是你怎么知道后面是什么？某种浏览器/库来解决这个问题。

让我发表一个答案

SVG 和画布是 2D 技术，而不是 3D。如果你有 3D 需求，也许你应该看看 webGL

@Robert：感谢您的指导。

【参考方案1】：

当您想要渲染 3d 时，有两种解决方案。首先是从后到前渲染每个三角形/四边形。

这通常可以通过平均顶点位置来计算形状的中间来完成，然后根据 z 坐标对三角形进行排序。

排序后，按顺序渲染。

另一个解决方案基本上就是您正在寻找的。您需要通过在 2 个侧向量上使用叉积来计算法线向量。绘制立方体时，需要对三角形的法线和相机的方向向量进行点积，如果这个值小于等于0（两个向量的夹角大于90°），则不要' t 绘制三角形。

【讨论】：

这是一个非常聪明的答案，但我想我搞砸了这个问题。正如 Robert Longson 的评论所指出的，我使用了错误的技术，我应该使用 WebGL 而不是像 SVG 这样的固有 2D 技术。我会接受这个答案并接受对此的关闭。无论如何，谢谢 Bálint。

@SMeaden You don't need 3d technologys to draw 3d

让我玩弄 WebGL。照你说的做可能会更容易。我需要几天，如果不是几周的话（这里很忙）

@SMeaden 进入 WebGL（或一般的 OpenGL）很难。真的很难。大多数教程都有了解现代 OpenGL 的先决条件

乍一看，en.wikipedia.org/wiki/WebGL#Design WebGL 是基于 Canvas 的，所以我认为它是必要的。我正在寻找一些声明性的东西。还在寻找。