RaytracingRenderer.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. /**
  2. * @author mrdoob / http://mrdoob.com/
  3. */
  4. THREE.RaytracingRenderer = function ( parameters ) {
  5. console.log( 'THREE.RaytracingRenderer', THREE.REVISION );
  6. parameters = parameters || {};
  7. var canvas = document.createElement( 'canvas' );
  8. var context = canvas.getContext( '2d', {
  9. alpha: parameters.alpha === true
  10. } );
  11. var canvasWidth, canvasHeight;
  12. var canvasWidthHalf, canvasHeightHalf;
  13. var clearColor = new THREE.Color( 0x000000 );
  14. var blockX, blockY;
  15. var blockSize = 64;
  16. var canvasBlock = document.createElement( 'canvas' );
  17. canvasBlock.width = blockSize;
  18. canvasBlock.height = blockSize;
  19. var contextBlock = canvasBlock.getContext( '2d', {
  20. alpha: parameters.alpha === true
  21. } );
  22. var imagedata = contextBlock.getImageData( 0, 0, blockSize, blockSize );
  23. var data = imagedata.data;
  24. var color = new THREE.Color();
  25. var lightColor = new THREE.Color();
  26. var origin = new THREE.Vector3();
  27. var direction = new THREE.Vector3();
  28. var raycaster = new THREE.Raycaster( origin, direction );
  29. var raycasterLight = new THREE.Raycaster();
  30. var perspective;
  31. var cameraNormalMatrix = new THREE.Matrix3();
  32. var objects;
  33. var lights = [];
  34. var animationFrameId = null;
  35. this.domElement = canvas;
  36. this.autoClear = true;
  37. this.setClearColor = function ( color, alpha ) {
  38. clearColor.set( color );
  39. };
  40. this.setSize = function ( width, height ) {
  41. canvas.width = width;
  42. canvas.height = height;
  43. canvasWidth = canvas.width;
  44. canvasHeight = canvas.height;
  45. canvasWidthHalf = Math.floor( canvasWidth / 2 );
  46. canvasHeightHalf = Math.floor( canvasHeight / 2 );
  47. context.fillStyle = 'white';
  48. };
  49. this.setSize( canvas.width, canvas.height );
  50. this.clear = function () {
  51. };
  52. var renderBlock = function () {
  53. for ( var i = 0, l = data.length; i < l; i += 4 ) {
  54. data[ i ] = 0;
  55. data[ i + 1 ] = 0;
  56. data[ i + 2 ] = 0;
  57. }
  58. var index = 0;
  59. for ( var y = 0; y < blockSize; y ++ ) {
  60. for ( var x = 0; x < blockSize; x ++, index += 4 ) {
  61. direction.set( x + blockX - canvasWidthHalf, - ( y + blockY - canvasHeightHalf ), - perspective );
  62. direction.applyMatrix3( cameraNormalMatrix ).normalize();
  63. var intersections = raycaster.intersectObjects( objects, true );
  64. if ( intersections.length > 0 ) {
  65. var intersection = intersections[ 0 ];
  66. var point = intersection.point;
  67. var object = intersection.object;
  68. var material = object.material;
  69. var face = intersection.face;
  70. if ( material.vertexColors === THREE.NoColors ) {
  71. color.copy( material.color );
  72. } else if ( material.vertexColors === THREE.FaceColors ) {
  73. color.copy( face.color );
  74. }
  75. if ( material instanceof THREE.MeshLambertMaterial ||
  76. material instanceof THREE.MeshPhongMaterial ) {
  77. lightColor.set( 0, 0, 0 );
  78. raycasterLight.ray.origin.copy( point );
  79. for ( var i = 0, l = lights.length; i < l; i ++ ) {
  80. var light = lights[ i ];
  81. raycasterLight.ray.direction.copy( light.position ).sub( point ).normalize();
  82. var intersections = raycasterLight.intersectObjects( objects, true );
  83. if ( intersections.length === 0 ) {
  84. var dot = Math.max( face.normal.dot( raycasterLight.ray.direction ), 0 );
  85. var intensity = dot * light.intensity;
  86. lightColor.r += light.color.r * intensity;
  87. lightColor.g += light.color.g * intensity;
  88. lightColor.b += light.color.b * intensity;
  89. }
  90. }
  91. color.multiply( lightColor );
  92. }
  93. data[ index ] = color.r * 255;
  94. data[ index + 1 ] = color.g * 255;
  95. data[ index + 2 ] = color.b * 255;
  96. }
  97. }
  98. }
  99. context.putImageData( imagedata, blockX, blockY );
  100. blockX += blockSize;
  101. if ( blockX >= canvasWidth ) {
  102. blockX = 0;
  103. blockY += blockSize;
  104. if ( blockY >= canvasHeight ) return;
  105. }
  106. context.fillRect( blockX, blockY, blockSize, blockSize );
  107. animationFrameId = requestAnimationFrame( renderBlock );
  108. };
  109. this.render = function ( scene, camera ) {
  110. if ( this.autoClear === true ) this.clear();
  111. cancelAnimationFrame( animationFrameId );
  112. blockX = 0;
  113. blockY = 0;
  114. cameraNormalMatrix.getNormalMatrix( camera.matrixWorld );
  115. origin.copy( camera.position );
  116. perspective = 0.5 / Math.tan( THREE.Math.degToRad( camera.fov * 0.5 ) ) * canvasHeight;
  117. objects = scene.children;
  118. // collect lights
  119. lights.length = 0;
  120. scene.traverse( function ( object ) {
  121. if ( object instanceof THREE.Light ) {
  122. lights.push( object );
  123. }
  124. } )
  125. renderBlock();
  126. }
  127. };