XML文档中的WebGL

Question

我想直接从自身处理XML文档，并使用WebGL呈现其某些数据/元素。 因此，我使用xhtml：script运行我的JavaScript代码。

WebGL API可用（例如window.WebGLRenderingContext）。 但是，当我尝试从canvas元素获取WebGl上下文时（请参见下面的代码），我得到了null。

• 为什么WebGL上下文不可用？
• 我怎样才能达到预期的行为？

相同的JavaScript代码在简单的HTML文档中也可以正常工作。 我使用Chrome浏览器。

XML文档（已简化测试）：

<?xml version="1.0" encoding="UTF-8"?>
<myWorld>
<sphere></sphere>
<cube></cube>
<xhtml:script xmlns:xhtml="http://www.w3.org/1999/xhtml"
            src="process.js"
            type="application/javascript"/>
</myWorld>

JavaScript代码（process.js）：

//preparing for WebGL stuff
var impl = document.implementation,
htmlDoc = impl.createHTMLDocument("Hello");

// use newly created HTML document to create complete canvas object, 
// because our XML document does not know about canvas and therefore
// it creates simple Element node with 'canvas' tag name
var canvas = htmlDoc.createElement('canvas');

//everything okay
console.log(canvas);

//logs null. Why?
console.log(canvas.getContext('experimental-webgl'));

Answer 1

您说您正在使用Chrome； 我认为这是Chrome（显然是IE）中的错误-我当然不能从规范中证明其行为。 （这里有一个错误的Chrome和一个用于IE浏览器。）

简而言之：给定document.implementation.createHTMLDocument （或document.implementation.createDocument ）中的document.implementation.createDocument ，Chrome无法创建WebGL上下文。

但是，没有必要这样做。 您可以在当前文档中创建canvas元素：

 // create an HTML canvas element
var canvas = document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
console.log(canvas);
 // you probably ought use "webgl" and not "experimental-webgl" nowadays!
console.log(canvas.getContext('webgl'));