RaymondJS is a realtime pathtracing (basically a raytracing) engine that runs on GPU. It is built on WebGL and three.js so you can use it on your website as described below. I'm currently working on a headless version (with no canvas) that runs on Node.js. The RaymondJS server will generate pixel arrays and streams them (encoded or not?) to its clients in the hope to increase performance.
Once the streaming engine is set up correctly, I will try to implement a distributed engine: many RaymondJS instances (somehow connected via websockets) could render small parts of the same scene, which could once again increase performance.
This constructor sets the following properties:
contextThis is the webgl context (optional)canvasThis is the canvas (optional, RaymondJS will create one and, for now, append it to<body>)
Draws the result of the first bunch of rays on the canvas
callbackThis function gets called at the beginning of a render pass
controlsThis is the camera manipulating object
Returns a camera of type THREE.Camera. This could be usefull to initialize your controls
This method resets the sample counter to zero, which tells the engine to ignore the result of former rays and restart the blending process. This is especially interessting on camera movements.
The scene definition is currently hard coded. The next step will be to provide one or more setter methods allowing to render different scenes. I think the OBJ format is good enough to kick things off. But still, providing a scene API is quite challenging for I have to load different parts of shader code depending on what's given in the scene definition. So I think putting OBJ definitions into one JSON file would do a good job. I'll start a discussion in time.
(function( Raymond, undefined ) {
var engine = new Raymond();
var controls = new THREE.TrackballControls(engine.getCamera());
controls.target = new THREE.Vector3(0, 0, -2);
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
controls.keys = [ 65, 83, 68 ];
controls.addEventListener('change', function() {
engine.resetSampleCounter();
});
engine.setControls(controls);
engine.setRenderCallback(function() {
controls.update();
});
var element = document.getElementById('canvas');
element.appendChild(engine.renderer.domElement);
function animate() {
requestAnimationFrame(animate);
engine.render();
}
animate();
})(window.Raymond);
First run $ npm install.
$ gulp js will bundle the node modules and place one minified javascript-file and a seperate sourcemaps-file into the client/server folder. With $ gulp connect you'll start a small local webserver pointing to client.
You could also just execute: $ browserify --standalone Raymond -t brfs server/engine.js > client/bundle.js to bundle the application.