目前我在客户端使用基于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的左上角考虑了原点。如何处理这个。如果需要,我可以在这里分享完整的代码。