WebGL2Renderer.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. /**
  2. * @author mrdoob / http://mrdoob.com/
  3. */
  4. import { REVISION } from '../constants';
  5. import { WebGLExtensions } from './webgl/WebGLExtensions';
  6. import { WebGLState } from './webgl/WebGLState';
  7. import { Color } from '../math/Color';
  8. import { Vector4 } from '../math/Vector4';
  9. function WebGL2Renderer( parameters ) {
  10. console.log( 'THREE.WebGL2Renderer', REVISION );
  11. parameters = parameters || {};
  12. var _canvas = parameters.canvas !== undefined ? parameters.canvas : document.createElementNS( 'http://www.w3.org/1999/xhtml', 'canvas' ),
  13. _context = parameters.context !== undefined ? parameters.context : null,
  14. _alpha = parameters.alpha !== undefined ? parameters.alpha : false,
  15. _depth = parameters.depth !== undefined ? parameters.depth : true,
  16. _stencil = parameters.stencil !== undefined ? parameters.stencil : true,
  17. _antialias = parameters.antialias !== undefined ? parameters.antialias : false,
  18. _premultipliedAlpha = parameters.premultipliedAlpha !== undefined ? parameters.premultipliedAlpha : true,
  19. _preserveDrawingBuffer = parameters.preserveDrawingBuffer !== undefined ? parameters.preserveDrawingBuffer : false;
  20. // initialize
  21. var gl;
  22. try {
  23. var attributes = {
  24. alpha: _alpha,
  25. depth: _depth,
  26. stencil: _stencil,
  27. antialias: _antialias,
  28. premultipliedAlpha: _premultipliedAlpha,
  29. preserveDrawingBuffer: _preserveDrawingBuffer
  30. };
  31. gl = _context || _canvas.getContext( 'webgl2', attributes );
  32. if ( gl === null ) {
  33. if ( _canvas.getContext( 'webgl2' ) !== null ) {
  34. throw 'Error creating WebGL2 context with your selected attributes.';
  35. } else {
  36. throw 'Error creating WebGL2 context.';
  37. }
  38. }
  39. _canvas.addEventListener( 'webglcontextlost', onContextLost, false );
  40. } catch ( error ) {
  41. console.error( 'THREE.WebGL2Renderer: ' + error );
  42. }
  43. //
  44. var _this = this,
  45. _autoClear = true,
  46. _autoClearColor = true,
  47. _autoClearDepth = true,
  48. _autoClearStencil = true,
  49. _clearColor = new Color( 0x000000 ),
  50. _clearAlpha = 0,
  51. _width = _canvas.width,
  52. _height = _canvas.height,
  53. _pixelRatio = 1,
  54. _viewport = new Vector4( 0, 0, _width, _height );
  55. var extensions = new WebGLExtensions( gl );
  56. var state = new WebGLState( gl, extensions, function () {} );
  57. //
  58. function clear( color, depth, stencil ) {
  59. var bits = 0;
  60. if ( color === undefined || color ) bits |= gl.COLOR_BUFFER_BIT;
  61. if ( depth === undefined || depth ) bits |= gl.DEPTH_BUFFER_BIT;
  62. if ( stencil === undefined || stencil ) bits |= gl.STENCIL_BUFFER_BIT;
  63. gl.clear( bits );
  64. }
  65. function setPixelRatio( value ) {
  66. if ( value === undefined ) return;
  67. _pixelRatio = value;
  68. setSize( _viewport.z, _viewport.w, false );
  69. }
  70. function setSize( width, height, updateStyle ) {
  71. _width = width;
  72. _height = height;
  73. _canvas.width = width * _pixelRatio;
  74. _canvas.height = height * _pixelRatio;
  75. if ( updateStyle !== false ) {
  76. _canvas.style.width = width + 'px';
  77. _canvas.style.height = height + 'px';
  78. }
  79. setViewport( 0, 0, width, height );
  80. }
  81. function setViewport( x, y, width, height ) {
  82. state.viewport( _viewport.set( x, y, width, height ) );
  83. }
  84. function render( scene, camera ) {
  85. if ( camera !== undefined && camera.isCamera !== true ) {
  86. console.error( 'THREE.WebGL2Renderer.render: camera is not an instance of THREE.Camera.' );
  87. return;
  88. }
  89. var background = scene.background;
  90. var forceClear = false;
  91. if ( background === null ) {
  92. state.buffers.color.setClear( _clearColor.r, _clearColor.g, _clearColor.b, _clearAlpha, _premultipliedAlpha );
  93. } else if ( background && background.isColor ) {
  94. state.buffers.color.setClear( background.r, background.g, background.b, 1, _premultipliedAlpha );
  95. forceClear = true;
  96. }
  97. if ( _autoClear || forceClear ) {
  98. this.clear( _autoClearColor, _autoClearDepth, _autoClearStencil );
  99. }
  100. }
  101. function onContextLost( event ) {
  102. event.preventDefault();
  103. }
  104. return {
  105. domElement: _canvas,
  106. clear: clear,
  107. setPixelRatio: setPixelRatio,
  108. setSize: setSize,
  109. render: render
  110. }
  111. }
  112. export { WebGL2Renderer };