在 headless-gl javascript 中替代浏览器实现的 DOM 元素 'new Image()'？

Question

目前我在客户端使用基于webGL的浏览器实现代码。它工作得很好。但是，我想在服务器端使用相同的代码。是的，这不是基于浏览器的纯 javascript 代码，使用 headless-gl 包装器。

在执行此操作时我遇到了问题。

新 Image() 由浏览器识别，但在服务器端我收到错误 Image is not defined。

在node-webGL中它可以用作

*var Image = require("node-webgl").Image;*,

但在 headless-gl 中我尝试了

*require("gl").Image;* 和 *require('gl')(width, height, { preserveDrawingBuffer: true }).Image*.

以上我没有任何成功。有人可以提供一些解释，或建议在适当的地方寻找 headless-gl 手册吗？

Answer 1

Headless-gl 仅提供 WebGL。它不提供不属于 WebGL 本身的图像加载，图像是 HTML5

的一部分

你可以试试images package

要加载和获取数据，像这样应该可以工作

var images = require('images');
var img = images('/path/to/img.jpg');
var raw = img.toBuffer(images.TYPE_RAW);
var pixels = new Uint8Array(raw.buffer, 12); // skip the raw header

您现在可以上传图片了

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, img.width(), img.height(),
              0, gl.RGBA, gl.UNSIGNED_BYTE, pixels);

或者制作一个包装器来模拟图像的 WebGL API

gl.texImage2D = function(origFn) {
  return function(bind, mip, internalFormat) {
     var width;
     var height;
     var border;
     var format;
     var type;
     var data;
     if (arguments.length === 9) {
       // sig1: bind, mip, internalFormat, width, height, border, format, type, data
       width = arguments[3];
       height = arguments[4];
       border = arguments[5];
       format = arguments[6];
       type = arguments[7];
       data = arguments[8];
     } else if (arguments.length === 6) {
       // sig2: bind, mip, internalFormat, format, type, image
       format = arguments[3];
       type = arguments[4];
       img = arguments[6];
       var raw = img.toBuffer(images.TYPE_RAW);
       data = new Uint8Array(raw.buffer, 12); // skip the raw header           
       width = img.width();
       height = img.height();
       border = 0;
     } else {
       throw "Bad args to texImage2D";
     }
     gl.texImage2D(bind, mip, internalFormat, width, height, 
                   border, format, type, data);
  };
}(gl.texImage2D);

在 headless-gl javascript 中替代浏览器实现的 DOM 元素 'new Image()'？

alternative to DOM element 'new Image()' of browser implementation in headless-gl javascript?

browser

image

webgl

node.js