threejs和路径追踪或raymarching

时间:2014-07-03 07:01:02

标签: three.js rendering webgl raymarching

大家好我想创建一个使用threejs和路径跟踪渲染方法的页面。 Threejs没有路径跟踪渲染电机。所以我需要实现它。我试图实现madebyevan.com/webgl-path-tracing/的方法,但是我应该使用threejs渲染的方法?你的建议是什么?

我发现一个页面使用了该方法;

function main(nworker, iterationsPerMessage, width, height){
    if(typeof(Worker) == 'undefined') {
        alert('Your browser does not support web worker!');
        return;
    }
    var canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext('2d');
    document.body.appendChild(canvas);
    var image = ctx.getImageData(0, 0, width, height);
    var buffer = [];
    var iterations = 0;
    var start = new Date();
    for(var i = 0; i < width*height*3; i++) {
        buffer.push(0.0);
    }

    var workers = [];
    for(i = 0; i < nworker;i++){
        var worker = new Worker('worker.js');
        worker.onmessage = function(message) {
            iterations += iterationsPerMessage;
            var td = new Date()-start;
            document.title = iterations + ' i - ' + Math.round(iterations*100000/td)/100  + ' i/s';
            var data = message.data;
            if(typeof(data) == 'string') {
                data = JSON.parse(data);
            }
            for(var j = 0; j < data.length; j++) {
                buffer[j] += data[j];
            }
            for(var k=0,j=0;k < width*height*4;) {
                image.data[k++] = buffer[j++]*255/iterations;
                image.data[k++] = buffer[j++]*255/iterations;
                image.data[k++] = buffer[j++]*255/iterations;
                image.data[k++] = 255;
            }
            ctx.putImageData(image, 0, 0);

        }
        worker.postMessage([width, height, iterationsPerMessage]);
    }
}

0 个答案:

没有答案