Renderer.js 26 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247
  1. import Animation from './Animation.js';
  2. import RenderObjects from './RenderObjects.js';
  3. import Attributes from './Attributes.js';
  4. import Geometries from './Geometries.js';
  5. import Info from './Info.js';
  6. import Pipelines from './Pipelines.js';
  7. import Bindings from './Bindings.js';
  8. import RenderLists from './RenderLists.js';
  9. import RenderContexts from './RenderContexts.js';
  10. import Textures from './Textures.js';
  11. import Background from './Background.js';
  12. import Nodes from './nodes/Nodes.js';
  13. import Color4 from './Color4.js';
  14. import { Scene, Frustum, Matrix4, Vector2, Vector3, Vector4, DoubleSide, BackSide, FrontSide, SRGBColorSpace, NoToneMapping } from 'three';
  15. const _scene = new Scene();
  16. const _drawingBufferSize = new Vector2();
  17. const _screen = new Vector4();
  18. const _frustum = new Frustum();
  19. const _projScreenMatrix = new Matrix4();
  20. const _vector3 = new Vector3();
  21. class Renderer {
  22. constructor( backend, parameters = {} ) {
  23. this.isRenderer = true;
  24. //
  25. const {
  26. logarithmicDepthBuffer = false,
  27. alpha = true
  28. } = parameters;
  29. // public
  30. this.domElement = backend.getDomElement();
  31. this.backend = backend;
  32. this.autoClear = true;
  33. this.autoClearColor = true;
  34. this.autoClearDepth = true;
  35. this.autoClearStencil = true;
  36. this.alpha = alpha;
  37. this.logarithmicDepthBuffer = logarithmicDepthBuffer;
  38. this.outputColorSpace = SRGBColorSpace;
  39. this.toneMapping = NoToneMapping;
  40. this.toneMappingExposure = 1.0;
  41. this.sortObjects = true;
  42. this.depth = true;
  43. this.stencil = true;
  44. this.info = new Info();
  45. // internals
  46. this._pixelRatio = 1;
  47. this._width = this.domElement.width;
  48. this._height = this.domElement.height;
  49. this._viewport = new Vector4( 0, 0, this._width, this._height );
  50. this._scissor = new Vector4( 0, 0, this._width, this._height );
  51. this._scissorTest = false;
  52. this._attributes = null;
  53. this._geometries = null;
  54. this._nodes = null;
  55. this._animation = null;
  56. this._bindings = null;
  57. this._objects = null;
  58. this._pipelines = null;
  59. this._renderLists = null;
  60. this._renderContexts = null;
  61. this._textures = null;
  62. this._background = null;
  63. this._currentRenderContext = null;
  64. this._opaqueSort = null;
  65. this._transparentSort = null;
  66. const alphaClear = this.alpha === true ? 0 : 1;
  67. this._clearColor = new Color4( 0, 0, 0, alphaClear );
  68. this._clearDepth = 1;
  69. this._clearStencil = 0;
  70. this._renderTarget = null;
  71. this._activeCubeFace = 0;
  72. this._activeMipmapLevel = 0;
  73. this._renderObjectFunction = null;
  74. this._currentRenderObjectFunction = null;
  75. this._handleObjectFunction = this._renderObjectDirect;
  76. this._initialized = false;
  77. this._initPromise = null;
  78. this._compilationPromises = null;
  79. // backwards compatibility
  80. this.shadowMap = {
  81. enabled: false,
  82. type: null
  83. };
  84. this.xr = {
  85. enabled: false
  86. };
  87. }
  88. async init() {
  89. if ( this._initialized ) {
  90. throw new Error( 'Renderer: Backend has already been initialized.' );
  91. }
  92. if ( this._initPromise !== null ) {
  93. return this._initPromise;
  94. }
  95. this._initPromise = new Promise( async ( resolve, reject ) => {
  96. const backend = this.backend;
  97. try {
  98. await backend.init( this );
  99. } catch ( error ) {
  100. reject( error );
  101. return;
  102. }
  103. this._nodes = new Nodes( this, backend );
  104. this._animation = new Animation( this._nodes, this.info );
  105. this._attributes = new Attributes( backend );
  106. this._background = new Background( this, this._nodes );
  107. this._geometries = new Geometries( this._attributes, this.info );
  108. this._textures = new Textures( this, backend, this.info );
  109. this._pipelines = new Pipelines( backend, this._nodes );
  110. this._bindings = new Bindings( backend, this._nodes, this._textures, this._attributes, this._pipelines, this.info );
  111. this._objects = new RenderObjects( this, this._nodes, this._geometries, this._pipelines, this._bindings, this.info );
  112. this._renderLists = new RenderLists();
  113. this._renderContexts = new RenderContexts();
  114. //
  115. this._initialized = true;
  116. resolve();
  117. } );
  118. return this._initPromise;
  119. }
  120. get coordinateSystem() {
  121. return this.backend.coordinateSystem;
  122. }
  123. async compileAsync( scene, camera, targetScene = null ) {
  124. if ( this._initialized === false ) await this.init();
  125. // preserve render tree
  126. const nodeFrame = this._nodes.nodeFrame;
  127. const previousRenderId = nodeFrame.renderId;
  128. const previousRenderContext = this._currentRenderContext;
  129. const previousRenderObjectFunction = this._currentRenderObjectFunction;
  130. const previousCompilationPromises = this._compilationPromises;
  131. //
  132. const sceneRef = ( scene.isScene === true ) ? scene : _scene;
  133. if ( targetScene === null ) targetScene = scene;
  134. const renderTarget = this._renderTarget;
  135. const renderContext = this._renderContexts.get( targetScene, camera, renderTarget );
  136. const activeMipmapLevel = this._activeMipmapLevel;
  137. const compilationPromises = [];
  138. this._currentRenderContext = renderContext;
  139. this._currentRenderObjectFunction = this.renderObject;
  140. this._handleObjectFunction = this._createObjectPipeline;
  141. this._compilationPromises = compilationPromises;
  142. nodeFrame.renderId ++;
  143. //
  144. nodeFrame.update();
  145. //
  146. renderContext.depth = this.depth;
  147. renderContext.stencil = this.stencil;
  148. //
  149. sceneRef.onBeforeRender( this, scene, camera, renderTarget );
  150. //
  151. const renderList = this._renderLists.get( scene, camera );
  152. renderList.begin();
  153. this._projectObject( scene, camera, 0, renderList );
  154. // include lights from target scene
  155. if ( targetScene !== scene ) {
  156. targetScene.traverseVisible( function ( object ) {
  157. if ( object.isLight && object.layers.test( camera.layers ) ) {
  158. renderList.pushLight( object );
  159. }
  160. } );
  161. }
  162. renderList.finish();
  163. //
  164. if ( renderTarget !== null ) {
  165. this._textures.updateRenderTarget( renderTarget, activeMipmapLevel );
  166. const renderTargetData = this._textures.get( renderTarget );
  167. renderContext.textures = renderTargetData.textures;
  168. renderContext.depthTexture = renderTargetData.depthTexture;
  169. } else {
  170. renderContext.textures = null;
  171. renderContext.depthTexture = null;
  172. }
  173. //
  174. this._nodes.updateScene( sceneRef );
  175. //
  176. this._background.update( sceneRef, renderList, renderContext );
  177. // process render lists
  178. const opaqueObjects = renderList.opaque;
  179. const transparentObjects = renderList.transparent;
  180. const lightsNode = renderList.lightsNode;
  181. if ( opaqueObjects.length > 0 ) this._renderObjects( opaqueObjects, camera, sceneRef, lightsNode );
  182. if ( transparentObjects.length > 0 ) this._renderObjects( transparentObjects, camera, sceneRef, lightsNode );
  183. // restore render tree
  184. nodeFrame.renderId = previousRenderId;
  185. this._currentRenderContext = previousRenderContext;
  186. this._currentRenderObjectFunction = previousRenderObjectFunction;
  187. this._compilationPromises = previousCompilationPromises;
  188. this._handleObjectFunction = this._renderObjectDirect;
  189. // wait for all promises setup by backends awaiting compilation/linking/pipeline creation to complete
  190. await Promise.all( compilationPromises );
  191. }
  192. async renderAsync( scene, camera ) {
  193. if ( this._initialized === false ) await this.init();
  194. // preserve render tree
  195. const nodeFrame = this._nodes.nodeFrame;
  196. const previousRenderId = nodeFrame.renderId;
  197. const previousRenderContext = this._currentRenderContext;
  198. const previousRenderObjectFunction = this._currentRenderObjectFunction;
  199. //
  200. const sceneRef = ( scene.isScene === true ) ? scene : _scene;
  201. const renderTarget = this._renderTarget;
  202. const renderContext = this._renderContexts.get( scene, camera, renderTarget );
  203. const activeCubeFace = this._activeCubeFace;
  204. const activeMipmapLevel = this._activeMipmapLevel;
  205. this._currentRenderContext = renderContext;
  206. this._currentRenderObjectFunction = this._renderObjectFunction || this.renderObject;
  207. //
  208. this.info.calls ++;
  209. this.info.render.calls ++;
  210. nodeFrame.renderId = this.info.calls;
  211. //
  212. const coordinateSystem = this.coordinateSystem;
  213. if ( camera.coordinateSystem !== coordinateSystem ) {
  214. camera.coordinateSystem = coordinateSystem;
  215. camera.updateProjectionMatrix();
  216. }
  217. //
  218. if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
  219. if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
  220. if ( this.info.autoReset === true ) this.info.reset();
  221. //
  222. let viewport = this._viewport;
  223. let scissor = this._scissor;
  224. let pixelRatio = this._pixelRatio;
  225. if ( renderTarget !== null ) {
  226. viewport = renderTarget.viewport;
  227. scissor = renderTarget.scissor;
  228. pixelRatio = 1;
  229. }
  230. this.getDrawingBufferSize( _drawingBufferSize );
  231. _screen.set( 0, 0, _drawingBufferSize.width, _drawingBufferSize.height );
  232. const minDepth = ( viewport.minDepth === undefined ) ? 0 : viewport.minDepth;
  233. const maxDepth = ( viewport.maxDepth === undefined ) ? 1 : viewport.maxDepth;
  234. renderContext.viewportValue.copy( viewport ).multiplyScalar( pixelRatio ).floor();
  235. renderContext.viewportValue.width >>= activeMipmapLevel;
  236. renderContext.viewportValue.height >>= activeMipmapLevel;
  237. renderContext.viewportValue.minDepth = minDepth;
  238. renderContext.viewportValue.maxDepth = maxDepth;
  239. renderContext.viewport = renderContext.viewportValue.equals( _screen ) === false;
  240. renderContext.scissorValue.copy( scissor ).multiplyScalar( pixelRatio ).floor();
  241. renderContext.scissor = this._scissorTest && renderContext.scissorValue.equals( _screen ) === false;
  242. renderContext.scissorValue.width >>= activeMipmapLevel;
  243. renderContext.scissorValue.height >>= activeMipmapLevel;
  244. //
  245. sceneRef.onBeforeRender( this, scene, camera, renderTarget );
  246. //
  247. _projScreenMatrix.multiplyMatrices( camera.projectionMatrix, camera.matrixWorldInverse );
  248. _frustum.setFromProjectionMatrix( _projScreenMatrix, coordinateSystem );
  249. const renderList = this._renderLists.get( scene, camera );
  250. renderList.begin();
  251. this._projectObject( scene, camera, 0, renderList );
  252. renderList.finish();
  253. if ( this.sortObjects === true ) {
  254. renderList.sort( this._opaqueSort, this._transparentSort );
  255. }
  256. //
  257. if ( renderTarget !== null ) {
  258. this._textures.updateRenderTarget( renderTarget, activeMipmapLevel );
  259. const renderTargetData = this._textures.get( renderTarget );
  260. renderContext.textures = renderTargetData.textures;
  261. renderContext.depthTexture = renderTargetData.depthTexture;
  262. renderContext.width = renderTargetData.width;
  263. renderContext.height = renderTargetData.height;
  264. renderContext.renderTarget = renderTarget;
  265. renderContext.depth = renderTarget.depthBuffer;
  266. renderContext.stencil = renderTarget.stencilBuffer;
  267. } else {
  268. renderContext.textures = null;
  269. renderContext.depthTexture = null;
  270. renderContext.width = this.domElement.width;
  271. renderContext.height = this.domElement.height;
  272. renderContext.depth = this.depth;
  273. renderContext.stencil = this.stencil;
  274. }
  275. renderContext.width >>= activeMipmapLevel;
  276. renderContext.height >>= activeMipmapLevel;
  277. renderContext.activeCubeFace = activeCubeFace;
  278. renderContext.activeMipmapLevel = activeMipmapLevel;
  279. renderContext.occlusionQueryCount = renderList.occlusionQueryCount;
  280. //
  281. this._nodes.updateScene( sceneRef );
  282. //
  283. this._background.update( sceneRef, renderList, renderContext );
  284. //
  285. this.backend.beginRender( renderContext );
  286. // process render lists
  287. const opaqueObjects = renderList.opaque;
  288. const transparentObjects = renderList.transparent;
  289. const lightsNode = renderList.lightsNode;
  290. if ( opaqueObjects.length > 0 ) this._renderObjects( opaqueObjects, camera, sceneRef, lightsNode );
  291. if ( transparentObjects.length > 0 ) this._renderObjects( transparentObjects, camera, sceneRef, lightsNode );
  292. // finish render pass
  293. this.backend.finishRender( renderContext );
  294. // restore render tree
  295. nodeFrame.renderId = previousRenderId;
  296. this._currentRenderContext = previousRenderContext;
  297. this._currentRenderObjectFunction = previousRenderObjectFunction;
  298. //
  299. sceneRef.onAfterRender( this, scene, camera, renderTarget );
  300. await this.backend.resolveTimestampAsync( renderContext, 'render' );
  301. }
  302. getMaxAnisotropy() {
  303. return this.backend.getMaxAnisotropy();
  304. }
  305. getActiveCubeFace() {
  306. return this._activeCubeFace;
  307. }
  308. getActiveMipmapLevel() {
  309. return this._activeMipmapLevel;
  310. }
  311. async setAnimationLoop( callback ) {
  312. if ( this._initialized === false ) await this.init();
  313. this._animation.setAnimationLoop( callback );
  314. }
  315. getArrayBuffer( attribute ) { // @deprecated, r155
  316. console.warn( 'THREE.Renderer: getArrayBuffer() is deprecated. Use getArrayBufferAsync() instead.' );
  317. return this.getArrayBufferAsync( attribute );
  318. }
  319. async getArrayBufferAsync( attribute ) {
  320. return await this.backend.getArrayBufferAsync( attribute );
  321. }
  322. getContext() {
  323. return this.backend.getContext();
  324. }
  325. getPixelRatio() {
  326. return this._pixelRatio;
  327. }
  328. getDrawingBufferSize( target ) {
  329. return target.set( this._width * this._pixelRatio, this._height * this._pixelRatio ).floor();
  330. }
  331. getSize( target ) {
  332. return target.set( this._width, this._height );
  333. }
  334. setPixelRatio( value = 1 ) {
  335. this._pixelRatio = value;
  336. this.setSize( this._width, this._height, false );
  337. }
  338. setDrawingBufferSize( width, height, pixelRatio ) {
  339. this._width = width;
  340. this._height = height;
  341. this._pixelRatio = pixelRatio;
  342. this.domElement.width = Math.floor( width * pixelRatio );
  343. this.domElement.height = Math.floor( height * pixelRatio );
  344. this.setViewport( 0, 0, width, height );
  345. if ( this._initialized ) this.backend.updateSize();
  346. }
  347. setSize( width, height, updateStyle = true ) {
  348. this._width = width;
  349. this._height = height;
  350. this.domElement.width = Math.floor( width * this._pixelRatio );
  351. this.domElement.height = Math.floor( height * this._pixelRatio );
  352. if ( updateStyle === true ) {
  353. this.domElement.style.width = width + 'px';
  354. this.domElement.style.height = height + 'px';
  355. }
  356. this.setViewport( 0, 0, width, height );
  357. if ( this._initialized ) this.backend.updateSize();
  358. }
  359. setOpaqueSort( method ) {
  360. this._opaqueSort = method;
  361. }
  362. setTransparentSort( method ) {
  363. this._transparentSort = method;
  364. }
  365. getScissor( target ) {
  366. const scissor = this._scissor;
  367. target.x = scissor.x;
  368. target.y = scissor.y;
  369. target.width = scissor.width;
  370. target.height = scissor.height;
  371. return target;
  372. }
  373. setScissor( x, y, width, height ) {
  374. const scissor = this._scissor;
  375. if ( x.isVector4 ) {
  376. scissor.copy( x );
  377. } else {
  378. scissor.set( x, y, width, height );
  379. }
  380. }
  381. getScissorTest() {
  382. return this._scissorTest;
  383. }
  384. setScissorTest( boolean ) {
  385. this._scissorTest = boolean;
  386. this.backend.setScissorTest( boolean );
  387. }
  388. getViewport( target ) {
  389. return target.copy( this._viewport );
  390. }
  391. setViewport( x, y, width, height, minDepth = 0, maxDepth = 1 ) {
  392. const viewport = this._viewport;
  393. if ( x.isVector4 ) {
  394. viewport.copy( x );
  395. } else {
  396. viewport.set( x, y, width, height );
  397. }
  398. viewport.minDepth = minDepth;
  399. viewport.maxDepth = maxDepth;
  400. }
  401. getClearColor( target ) {
  402. return target.copy( this._clearColor );
  403. }
  404. setClearColor( color, alpha = 1 ) {
  405. this._clearColor.set( color );
  406. this._clearColor.a = alpha;
  407. }
  408. getClearAlpha() {
  409. return this._clearColor.a;
  410. }
  411. setClearAlpha( alpha ) {
  412. this._clearColor.a = alpha;
  413. }
  414. getClearDepth() {
  415. return this._clearDepth;
  416. }
  417. setClearDepth( depth ) {
  418. this._clearDepth = depth;
  419. }
  420. getClearStencil() {
  421. return this._clearStencil;
  422. }
  423. setClearStencil( stencil ) {
  424. this._clearStencil = stencil;
  425. }
  426. isOccluded( object ) {
  427. const renderContext = this._currentRenderContext;
  428. return renderContext && this.backend.isOccluded( renderContext, object );
  429. }
  430. async clearAsync( color = true, depth = true, stencil = true ) {
  431. if ( this._initialized === false ) await this.init();
  432. let renderTargetData = null;
  433. const renderTarget = this._renderTarget;
  434. if ( renderTarget !== null ) {
  435. this._textures.updateRenderTarget( renderTarget );
  436. renderTargetData = this._textures.get( renderTarget );
  437. }
  438. this.backend.clear( color, depth, stencil, renderTargetData );
  439. }
  440. clearColorAsync() {
  441. return this.clearAsync( true, false, false );
  442. }
  443. clearDepthAsync() {
  444. return this.clearAsync( false, true, false );
  445. }
  446. clearStencilAsync() {
  447. return this.clearAsync( false, false, true );
  448. }
  449. get currentColorSpace() {
  450. const renderTarget = this._renderTarget;
  451. if ( renderTarget !== null ) {
  452. const texture = renderTarget.texture;
  453. return ( Array.isArray( texture ) ? texture[ 0 ] : texture ).colorSpace;
  454. }
  455. return this.outputColorSpace;
  456. }
  457. dispose() {
  458. this.info.dispose();
  459. this._animation.dispose();
  460. this._objects.dispose();
  461. this._pipelines.dispose();
  462. this._nodes.dispose();
  463. this._bindings.dispose();
  464. this._renderLists.dispose();
  465. this._renderContexts.dispose();
  466. this._textures.dispose();
  467. this.setRenderTarget( null );
  468. this.setAnimationLoop( null );
  469. }
  470. setRenderTarget( renderTarget, activeCubeFace = 0, activeMipmapLevel = 0 ) {
  471. this._renderTarget = renderTarget;
  472. this._activeCubeFace = activeCubeFace;
  473. this._activeMipmapLevel = activeMipmapLevel;
  474. }
  475. getRenderTarget() {
  476. return this._renderTarget;
  477. }
  478. setRenderObjectFunction( renderObjectFunction ) {
  479. this._renderObjectFunction = renderObjectFunction;
  480. }
  481. getRenderObjectFunction() {
  482. return this._renderObjectFunction;
  483. }
  484. async computeAsync( computeNodes ) {
  485. if ( this._initialized === false ) await this.init();
  486. const nodeFrame = this._nodes.nodeFrame;
  487. const previousRenderId = nodeFrame.renderId;
  488. //
  489. this.info.calls ++;
  490. this.info.compute.calls ++;
  491. this.info.compute.computeCalls ++;
  492. nodeFrame.renderId = this.info.calls;
  493. //
  494. if ( this.info.autoReset === true ) this.info.resetCompute();
  495. const backend = this.backend;
  496. const pipelines = this._pipelines;
  497. const bindings = this._bindings;
  498. const nodes = this._nodes;
  499. const computeList = Array.isArray( computeNodes ) ? computeNodes : [ computeNodes ];
  500. if ( computeList[ 0 ] === undefined || computeList[ 0 ].isComputeNode !== true ) {
  501. throw new Error( 'THREE.Renderer: .compute() expects a ComputeNode.' );
  502. }
  503. backend.beginCompute( computeNodes );
  504. for ( const computeNode of computeList ) {
  505. // onInit
  506. if ( pipelines.has( computeNode ) === false ) {
  507. const dispose = () => {
  508. computeNode.removeEventListener( 'dispose', dispose );
  509. pipelines.delete( computeNode );
  510. bindings.delete( computeNode );
  511. nodes.delete( computeNode );
  512. };
  513. computeNode.addEventListener( 'dispose', dispose );
  514. //
  515. computeNode.onInit( { renderer: this } );
  516. }
  517. nodes.updateForCompute( computeNode );
  518. bindings.updateForCompute( computeNode );
  519. const computeBindings = bindings.getForCompute( computeNode );
  520. const computePipeline = pipelines.getForCompute( computeNode, computeBindings );
  521. backend.compute( computeNodes, computeNode, computeBindings, computePipeline );
  522. }
  523. backend.finishCompute( computeNodes );
  524. await this.backend.resolveTimestampAsync( computeNodes, 'compute' );
  525. //
  526. nodeFrame.renderId = previousRenderId;
  527. }
  528. hasFeatureAsync( name ) {
  529. return this.backend.hasFeatureAsync( name );
  530. }
  531. hasFeature( name ) {
  532. return this.backend.hasFeature( name );
  533. }
  534. copyFramebufferToTexture( framebufferTexture ) {
  535. const renderContext = this._currentRenderContext;
  536. this._textures.updateTexture( framebufferTexture );
  537. this.backend.copyFramebufferToTexture( framebufferTexture, renderContext );
  538. }
  539. readRenderTargetPixelsAsync( renderTarget, x, y, width, height ) {
  540. return this.backend.copyTextureToBuffer( renderTarget.texture, x, y, width, height );
  541. }
  542. _projectObject( object, camera, groupOrder, renderList ) {
  543. if ( object.visible === false ) return;
  544. const visible = object.layers.test( camera.layers );
  545. if ( visible ) {
  546. if ( object.isGroup ) {
  547. groupOrder = object.renderOrder;
  548. } else if ( object.isLOD ) {
  549. if ( object.autoUpdate === true ) object.update( camera );
  550. } else if ( object.isLight ) {
  551. renderList.pushLight( object );
  552. } else if ( object.isSprite ) {
  553. if ( ! object.frustumCulled || _frustum.intersectsSprite( object ) ) {
  554. if ( this.sortObjects === true ) {
  555. _vector3.setFromMatrixPosition( object.matrixWorld ).applyMatrix4( _projScreenMatrix );
  556. }
  557. const geometry = object.geometry;
  558. const material = object.material;
  559. if ( material.visible ) {
  560. renderList.push( object, geometry, material, groupOrder, _vector3.z, null );
  561. }
  562. }
  563. } else if ( object.isLineLoop ) {
  564. console.error( 'THREE.Renderer: Objects of type THREE.LineLoop are not supported. Please use THREE.Line or THREE.LineSegments.' );
  565. } else if ( object.isMesh || object.isLine || object.isPoints ) {
  566. if ( ! object.frustumCulled || _frustum.intersectsObject( object ) ) {
  567. const geometry = object.geometry;
  568. const material = object.material;
  569. if ( this.sortObjects === true ) {
  570. if ( geometry.boundingSphere === null ) geometry.computeBoundingSphere();
  571. _vector3
  572. .copy( geometry.boundingSphere.center )
  573. .applyMatrix4( object.matrixWorld )
  574. .applyMatrix4( _projScreenMatrix );
  575. }
  576. if ( Array.isArray( material ) ) {
  577. const groups = geometry.groups;
  578. for ( let i = 0, l = groups.length; i < l; i ++ ) {
  579. const group = groups[ i ];
  580. const groupMaterial = material[ group.materialIndex ];
  581. if ( groupMaterial && groupMaterial.visible ) {
  582. renderList.push( object, geometry, groupMaterial, groupOrder, _vector3.z, group );
  583. }
  584. }
  585. } else if ( material.visible ) {
  586. renderList.push( object, geometry, material, groupOrder, _vector3.z, null );
  587. }
  588. }
  589. }
  590. }
  591. const children = object.children;
  592. for ( let i = 0, l = children.length; i < l; i ++ ) {
  593. this._projectObject( children[ i ], camera, groupOrder, renderList );
  594. }
  595. }
  596. _renderObjects( renderList, camera, scene, lightsNode ) {
  597. // process renderable objects
  598. for ( let i = 0, il = renderList.length; i < il; i ++ ) {
  599. const renderItem = renderList[ i ];
  600. // @TODO: Add support for multiple materials per object. This will require to extract
  601. // the material from the renderItem object and pass it with its group data to renderObject().
  602. const { object, geometry, material, group } = renderItem;
  603. if ( camera.isArrayCamera ) {
  604. const cameras = camera.cameras;
  605. for ( let j = 0, jl = cameras.length; j < jl; j ++ ) {
  606. const camera2 = cameras[ j ];
  607. if ( object.layers.test( camera2.layers ) ) {
  608. const vp = camera2.viewport;
  609. const minDepth = ( vp.minDepth === undefined ) ? 0 : vp.minDepth;
  610. const maxDepth = ( vp.maxDepth === undefined ) ? 1 : vp.maxDepth;
  611. const viewportValue = this._currentRenderContext.viewportValue;
  612. viewportValue.copy( vp ).multiplyScalar( this._pixelRatio ).floor();
  613. viewportValue.minDepth = minDepth;
  614. viewportValue.maxDepth = maxDepth;
  615. this.backend.updateViewport( this._currentRenderContext );
  616. this._currentRenderObjectFunction( object, scene, camera2, geometry, material, group, lightsNode );
  617. }
  618. }
  619. } else {
  620. this._currentRenderObjectFunction( object, scene, camera, geometry, material, group, lightsNode );
  621. }
  622. }
  623. }
  624. renderObject( object, scene, camera, geometry, material, group, lightsNode ) {
  625. let overridePositionNode;
  626. let overrideFragmentNode;
  627. //
  628. object.onBeforeRender( this, scene, camera, geometry, material, group );
  629. material.onBeforeRender( this, scene, camera, geometry, material, group );
  630. //
  631. if ( scene.overrideMaterial !== null ) {
  632. const overrideMaterial = scene.overrideMaterial;
  633. if ( material.positionNode && material.positionNode.isNode ) {
  634. overridePositionNode = overrideMaterial.positionNode;
  635. overrideMaterial.positionNode = material.positionNode;
  636. }
  637. if ( overrideMaterial.isShadowNodeMaterial && ( material.shadowNode && material.shadowNode.isNode ) ) {
  638. overrideFragmentNode = overrideMaterial.fragmentNode;
  639. overrideMaterial.fragmentNode = material.shadowNode;
  640. }
  641. material = overrideMaterial;
  642. }
  643. //
  644. if ( material.transparent === true && material.side === DoubleSide && material.forceSinglePass === false ) {
  645. material.side = BackSide;
  646. this._handleObjectFunction( object, material, scene, camera, lightsNode, 'backSide' ); // create backSide pass id
  647. material.side = FrontSide;
  648. this._handleObjectFunction( object, material, scene, camera, lightsNode ); // use default pass id
  649. material.side = DoubleSide;
  650. } else {
  651. this._handleObjectFunction( object, material, scene, camera, lightsNode );
  652. }
  653. //
  654. if ( overridePositionNode !== undefined ) {
  655. scene.overrideMaterial.positionNode = overridePositionNode;
  656. }
  657. if ( overrideFragmentNode !== undefined ) {
  658. scene.overrideMaterial.fragmentNode = overrideFragmentNode;
  659. }
  660. //
  661. object.onAfterRender( this, scene, camera, geometry, material, group );
  662. }
  663. _renderObjectDirect( object, material, scene, camera, lightsNode, passId ) {
  664. const renderObject = this._objects.get( object, material, scene, camera, lightsNode, this._currentRenderContext, passId );
  665. //
  666. this._nodes.updateBefore( renderObject );
  667. //
  668. object.modelViewMatrix.multiplyMatrices( camera.matrixWorldInverse, object.matrixWorld );
  669. object.normalMatrix.getNormalMatrix( object.modelViewMatrix );
  670. //
  671. this._nodes.updateForRender( renderObject );
  672. this._geometries.updateForRender( renderObject );
  673. this._bindings.updateForRender( renderObject );
  674. this._pipelines.updateForRender( renderObject );
  675. //
  676. this.backend.draw( renderObject, this.info );
  677. }
  678. _createObjectPipeline( object, material, scene, camera, lightsNode, passId ) {
  679. const renderObject = this._objects.get( object, material, scene, camera, lightsNode, this._currentRenderContext, passId );
  680. //
  681. this._nodes.updateBefore( renderObject );
  682. //
  683. this._nodes.updateForRender( renderObject );
  684. this._geometries.updateForRender( renderObject );
  685. this._bindings.updateForRender( renderObject );
  686. this._pipelines.getForRender( renderObject, this._compilationPromises );
  687. }
  688. get compute() {
  689. return this.computeAsync;
  690. }
  691. get compile() {
  692. return this.compileAsync;
  693. }
  694. get render() {
  695. return this.renderAsync;
  696. }
  697. get clear() {
  698. return this.clearAsync;
  699. }
  700. get clearColor() {
  701. return this.clearColorAsync;
  702. }
  703. get clearDepth() {
  704. return this.clearDepthAsync;
  705. }
  706. get clearStencil() {
  707. return this.clearStencilAsync;
  708. }
  709. }
  710. export default Renderer;