Javascript 使用节点webGL仅渲染部分图像，但在浏览器中完成渲染

目前，我正在客户端使用基于webGL的浏览器实现代码。它工作得很好。但是，我在服务器端使用相同的代码。是的，这不是使用节点webgl库的基于浏览器的纯javascript代码。进行了轻微修改，例如将浏览器的新图像（）替换为节点webGL支持的格式

我正在将生成的渲染图像写入图像文件。但图像文件显示部分渲染，但画布大小相同。是的，通过@gman的讨论，我了解到浏览器WebGL和节点WebGL并不是100%相同的实现，所以我试图找到一些替代功能来补偿这些

这是代码

入口点：

var nodejs=true,
WebGL = require('./node_modules/node-webgl/index'),
document = WebGL.document();
requestAnimationFrame = document.requestAnimationFrame;
alert=console.error;

start1 = new Date().getTime();
//Read and eval library
fs=require('fs');
eval(fs.readFileSync(__dirname+ '/sylvester.js','utf8'));
eval(fs.readFileSync(__dirname+ '/glUtils.js','utf8'));
eval(fs.readFileSync(__dirname+ '/glAux.js','utf8'));
eval(fs.readFileSync(__dirname+ '/volumercserver.js','utf8'));
end1 = new Date().getTime();
console.log(end1-start1);
volumerc_main('/raycast-color.frag','./aorta-high1.jpg','./tfold.png');

volumercserver.js摘录（包括完整代码）

左侧部分图像在节点webGL中渲染，右侧部分图像在浏览器中渲染。我不明白为什么在节点webgl中存在部分渲染。我不知道这是节点webGL的限制还是代码中的错误，如何调试？（因为volumercserver.js很大，所以我没有包含完整的代码）

是部分渲染显示，因为原点在节点webgl（openGL）的左下角，而原点在浏览器webgl的左上角。如何处理这个问题。如果需要，我可以在这里分享完整的代码

---

你试过了吗？取消与名称不正确的节点webgl的链接，headless gl实际上应该是节点中真正的webgl，并通过了webgl一致性测试。@gman我目前正在尝试headless gl，遇到一些错误。就像使用headless gl创建图像元素一样（与浏览器中的new image（）相同）？您尝试过吗？取消与名称不正确的节点webgl的链接，headless gl实际上应该是节点中真正的webgl，并通过了webgl一致性测试。@gman我目前正在尝试headless gl，遇到一些错误。类似于使用headless gl创建图像元素（与浏览器中的new image（）相同）？

 var Image = require("node-webgl").Image;
 var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;

 var Canvas = require('canvas')
 , canvas123 = new Canvas(512, 512)
 , ctx123 = canvas123.getContext('2d');

 var drawVolume;

 var time, end, start;
 var count=0;


/*
main function
*/
function volumerc_main(rayfrag, imgData, imgTF)
{
    start = new Date().getTime();       
    var canvas = document.createElement("canvas");
    canvas.id = 'canvas_win';
    canvas.width= 512;
    canvas.height= 512;
    var gl;

    try {
        gl = canvas.getContext("webgl", {premultipliedAlpha: false}) || canvas.getContext("experimental-webgl",{premultipliedAlpha: false});

    } catch (e) {
    }
    if (!gl) {
        alert("Could not initialise WebGL, sorry :-(");
    }   

    gl.shaderProgram_BackCoord = initShaders(gl,'/simple.vert','/simple.frag');
    gl.shaderProgram_RayCast = initShaders(gl,'/raycast.vert',rayfrag, imgData, imgTF);

    gl.fboBackCoord = initFBO(gl, canvas.width, canvas.height);
    initTexture(gl, imgData, imgTF);
    //console.log(gl);
    var cube = cubeBuffer(gl);

    drawVolume = function()
    {

        gl.clearColor(0.0, 0.0, 0.0, 0.0);
        gl.enable(gl.DEPTH_TEST);

        gl.bindFramebuffer(gl.FRAMEBUFFER, gl.fboBackCoord);
        gl.shaderProgram = gl.shaderProgram_BackCoord;
        gl.useProgram(gl.shaderProgram);
        gl.clearDepth(-50.0);
        gl.depthFunc(gl.GEQUAL);
        drawCube(gl,cube);

        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
        gl.shaderProgram = gl.shaderProgram_RayCast;
        gl.useProgram(gl.shaderProgram);
        gl.clearDepth(50.0);
        gl.depthFunc(gl.LEQUAL);

        gl.activeTexture(gl.TEXTURE0);
        gl.bindTexture(gl.TEXTURE_2D, gl.fboBackCoord.tex);

        gl.activeTexture(gl.TEXTURE1);
        gl.bindTexture(gl.TEXTURE_2D, gl.vol_tex);

        gl.activeTexture(gl.TEXTURE2);
        gl.bindTexture(gl.TEXTURE_2D, gl.tf_tex);

        gl.uniform1i(gl.getUniformLocation(gl.shaderProgram, "uBackCoord"), 0);
        gl.uniform1i(gl.getUniformLocation(gl.shaderProgram, "uVolData"), 1);
        gl.uniform1i(gl.getUniformLocation(gl.shaderProgram, "uTransferFunction"), 2);

        //Set Texture
        drawCube(gl,cube);


        var pixels = new Uint8Array(canvas.width * canvas.height * 4);
        gl.readPixels(0, 0, canvas.width, canvas.height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);

         var imageData = ctx123.createImageData(canvas.width, canvas.height);
            for (var i = pixels.length - 1; i >= 0; i--) {                                  
             {imageData.data[i] = pixels[i]};
             };


            ctx123.putImageData(imageData, 0, 0);
            console.log(canvas123);

      var fs = require('fs')
  , out = fs.createWriteStream(__dirname + '/text.png')
  , stream = canvas123.pngStream();

stream.on('data', function(chunk){
  out.write(chunk);
});

stream.on('end', function(){
 // console.log('saved png');
});                                                 
        end = new Date().getTime();

    }


    setTimeout(drawVolume, 15);         
 }