CardboardEffect.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. /**
  2. * @author mrdoob / http://mrdoob.com/
  3. */
  4. THREE.CardboardEffect = function ( renderer ) {
  5. var _camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
  6. var _scene = new THREE.Scene();
  7. var _stereo = new THREE.StereoCamera();
  8. _stereo.aspect = 0.5;
  9. var _params = { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat };
  10. var _renderTarget = new THREE.WebGLRenderTarget( 512, 512, _params );
  11. _renderTarget.scissorTest = true;
  12. // Distortion Mesh ported from:
  13. // https://github.com/borismus/webvr-boilerplate/blob/master/src/distortion/barrel-distortion-fragment.js
  14. var distortion = new THREE.Vector2( 0.441, 0.156 );
  15. var geometry = new THREE.PlaneBufferGeometry( 1, 1, 10, 20 );
  16. var indices = geometry.index.array;
  17. var positions = geometry.attributes.position.array;
  18. var uvs = geometry.attributes.uv.array;
  19. var vector = new THREE.Vector2();
  20. function poly( val ) {
  21. return 1.5 + ( distortion.x + distortion.y * val ) * val;
  22. }
  23. for ( var i = 0; i < indices.length; i ++ ) {
  24. vector.x = positions[ i * 3 + 0 ];
  25. vector.y = positions[ i * 3 + 1 ];
  26. var scalar = poly( vector.dot( vector ) );
  27. positions[ i * 3 + 0 ] = ( vector.x / scalar ) * 1.5 - 0.5;
  28. positions[ i * 3 + 1 ] = ( vector.y / scalar ) * 3.0;
  29. uvs[ i * 2 ] *= 0.5;
  30. }
  31. // clone geometry
  32. function copyArray( array1, array2, offset ) {
  33. for ( var i = 0, l = array2.length; i < l; i ++ ) {
  34. array1[ i + offset ] = array2[ i ];
  35. }
  36. }
  37. var indices2 = new Uint16Array( indices.length * 2 );
  38. var positions2 = new Float32Array( positions.length * 2 );
  39. var uvs2 = new Float32Array( uvs.length * 2 );
  40. copyArray( indices2, indices, 0 );
  41. copyArray( positions2, positions, 0 );
  42. copyArray( uvs2, uvs, 0 );
  43. var offset = positions.length / 3;
  44. for ( i = 0; i < indices.length; i ++ ) {
  45. indices[ i ] += offset;
  46. positions[ i * 3 ] += 1.0;
  47. uvs[ i * 2 ] += 0.5;
  48. }
  49. copyArray( indices2, indices, indices.length );
  50. copyArray( positions2, positions, positions.length );
  51. copyArray( uvs2, uvs, uvs.length );
  52. var geometry2 = new THREE.BufferGeometry();
  53. geometry2.setIndex( new THREE.BufferAttribute( indices2, 1 ) );
  54. geometry2.addAttribute( 'position', new THREE.BufferAttribute( positions2, 3 ) );
  55. geometry2.addAttribute( 'uv', new THREE.BufferAttribute( uvs2, 2 ) );
  56. // var material = new THREE.MeshBasicMaterial( { wireframe: true } );
  57. var material = new THREE.MeshBasicMaterial( { map: _renderTarget } );
  58. var mesh = new THREE.Mesh( geometry2, material );
  59. _scene.add( mesh );
  60. //
  61. this.setSize = function ( width, height ) {
  62. _renderTarget.setSize( width, height );
  63. renderer.setSize( width, height );
  64. };
  65. this.render = function ( scene, camera ) {
  66. scene.updateMatrixWorld();
  67. if ( camera.parent === null ) camera.updateMatrixWorld();
  68. _stereo.update( camera );
  69. var width = _renderTarget.width / 2;
  70. var height = _renderTarget.height;
  71. _renderTarget.scissor.set( 0, 0, width, height );
  72. _renderTarget.viewport.set( 0, 0, width, height );
  73. renderer.render( scene, _stereo.cameraL, _renderTarget );
  74. _renderTarget.scissor.set( width, 0, width, height );
  75. _renderTarget.viewport.set( width, 0, width, height );
  76. renderer.render( scene, _stereo.cameraR, _renderTarget );
  77. renderer.render( _scene, _camera );
  78. };
  79. };