从 Web 浏览器检查 HTML 画布上的 3D

【问题标题】：Inspecting 3D on HTML canvas from Web browser从 Web 浏览器检查 HTML 画布上的 3D
【发布时间】：2016-01-26 18:40:36
【问题描述】：

我正在尝试确定 this page 上加载的 3D 模型使用什么技术。通过使用 Chrome 开发工具，我可以看到加载在网络选项卡上的纹理。但是，在 HMTL 上，您只能看到 canvas 元素，这并不能说明太多。设置断点似乎不起作用，因为从 HTML 角度来看，元素不会改变。如何确定画布上正在运行的脚本/代码？

作为一个额外的问题，有人知道是否正在使用 WebGL 吗？或者暗示可能使用了哪些技术和数据格式（X3D...）。

【问题讨论】：

为什么是-1？我期待一些类似于stackoverflow.com/questions/18087209/…....的帮助。

标签： debugging web 3d webgl reverse-engineering

【解决方案1】：

它正在使用 webgl。获取webgl inspector 并运行它。如果网站显示 3D 模型，则可能使用 webgl。

至于输入数据格式，不知道，但是 webgl 检查器会将原始数据上传到 gpu，因此获取模型数据应该相当容易。从我所看到的情况来看，我猜测它使用的位置、法线和 uvs 交错到模型的一个数组缓冲区中。

【讨论】：

一种方法是在运行其他脚本之前将您自己的 javascript 注入到 canvas 方法中。例如，将HTMLCanvas.getContext 更改为function(args){console.log("getContext is called"), return HTMLCanvas.getContext(args)} 之类的内容，或者运行脚本以获取页面中正在运行的所有脚本并过滤不相关的脚本。或者运行分析器以查看每个帧中调用了哪些函数并从那里开始。