使用node-webGL仅渲染部分图像,但在浏览器中完成渲染

时间:2016-09-27 12:27:29

标签: javascript node.js webgl

目前我在客户端使用基于webGL的浏览器实现代码。它工作得很好。但是,我在服务器端使用相同的代码。是的,这不是基于浏览器的纯javascript代码,使用node-webgl库。稍作修改,例如将浏览器的新Image()替换为node-webGL支持的格式。

我将生成的渲染图像写入图像文件。但是图像文件显示部分渲染但具有相同的画布大小。是的,讨论@gman我开始知道浏览器WebGL和node-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摘录(包括完整代码)

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

左侧局部图像在node-webGL中渲染,右侧渲染在浏览器中。我不明白为什么在node-webgl中有部分渲染。我不知道它是node-webGL的限制还是代码中的任何错误,如何调试呢? (我没有包括volumercserver.js的完整代码,因为它很大。)

部分渲染显示是因为在node-webgl(openGL)的左下角考虑了原点而在浏览器WebGL的左上角考虑了原点。如何处理这个。如果需要,我可以在这里分享完整的代码。

enter image description here

0 个答案:

没有答案