Блог

В настоящее время я использую код реализации браузера на основе 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?

Headless-gl предоставляет только WebGL. Он не обеспечивает загрузку изображений, которые сами по себе не являются частью WebGL, изображения являются частью HTML5

Вы могли бы попробовать пакет images

Для загрузки и получения данных должно работать что-то вроде этого

 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);