Renderer.js 35 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570
  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 ClippingContext from './ClippingContext.js';
  15. import { Scene, Frustum, Matrix4, Vector2, Vector3, Vector4, DoubleSide, BackSide, FrontSide, SRGBColorSpace, NoColorSpace, NoToneMapping, LinearFilter, LinearSRGBColorSpace, RenderTarget, HalfFloatType, RGBAFormat } from 'three';
  16. import { NodeMaterial } from '../../nodes/Nodes.js';
  17. import QuadMesh from '../../objects/QuadMesh.js';
  18. import RenderBundles from './RenderBundles.js';
  19. const _scene = new Scene();
  20. const _drawingBufferSize = new Vector2();
  21. const _screen = new Vector4();
  22. const _frustum = new Frustum();
  23. const _projScreenMatrix = new Matrix4();
  24. const _vector3 = new Vector3();
  25. const _quad = new QuadMesh( new NodeMaterial() );
  26. class Renderer {
  27. constructor( backend, parameters = {} ) {
  28. this.isRenderer = true;
  29. //
  30. const {
  31. logarithmicDepthBuffer = false,
  32. alpha = true
  33. } = parameters;
  34. // public
  35. this.domElement = backend.getDomElement();
  36. this.backend = backend;
  37. this.autoClear = true;
  38. this.autoClearColor = true;
  39. this.autoClearDepth = true;
  40. this.autoClearStencil = true;
  41. this.alpha = alpha;
  42. this.logarithmicDepthBuffer = logarithmicDepthBuffer;
  43. this.outputColorSpace = SRGBColorSpace;
  44. this.toneMapping = NoToneMapping;
  45. this.toneMappingExposure = 1.0;
  46. this.sortObjects = true;
  47. this.depth = true;
  48. this.stencil = false;
  49. this.clippingPlanes = [];
  50. this.info = new Info();
  51. // nodes
  52. this.toneMappingNode = null;
  53. // internals
  54. this._pixelRatio = 1;
  55. this._width = this.domElement.width;
  56. this._height = this.domElement.height;
  57. this._viewport = new Vector4( 0, 0, this._width, this._height );
  58. this._scissor = new Vector4( 0, 0, this._width, this._height );
  59. this._scissorTest = false;
  60. this._attributes = null;
  61. this._geometries = null;
  62. this._nodes = null;
  63. this._animation = null;
  64. this._bindings = null;
  65. this._objects = null;
  66. this._pipelines = null;
  67. this._bundles = null;
  68. this._renderLists = null;
  69. this._renderContexts = null;
  70. this._textures = null;
  71. this._background = null;
  72. this._currentRenderContext = null;
  73. this._opaqueSort = null;
  74. this._transparentSort = null;
  75. this._frameBufferTarget = null;
  76. const alphaClear = this.alpha === true ? 0 : 1;
  77. this._clearColor = new Color4( 0, 0, 0, alphaClear );
  78. this._clearDepth = 1;
  79. this._clearStencil = 0;
  80. this._renderTarget = null;
  81. this._activeCubeFace = 0;
  82. this._activeMipmapLevel = 0;
  83. this._renderObjectFunction = null;
  84. this._currentRenderObjectFunction = null;
  85. this._currentRenderBundle = null;
  86. this._handleObjectFunction = this._renderObjectDirect;
  87. this._initialized = false;
  88. this._initPromise = null;
  89. this._compilationPromises = null;
  90. // backwards compatibility
  91. this.shadowMap = {
  92. enabled: false,
  93. type: null
  94. };
  95. this.xr = {
  96. enabled: false
  97. };
  98. }
  99. async init() {
  100. if ( this._initialized ) {
  101. throw new Error( 'Renderer: Backend has already been initialized.' );
  102. }
  103. if ( this._initPromise !== null ) {
  104. return this._initPromise;
  105. }
  106. this._initPromise = new Promise( async ( resolve, reject ) => {
  107. const backend = this.backend;
  108. try {
  109. await backend.init( this );
  110. } catch ( error ) {
  111. reject( error );
  112. return;
  113. }
  114. this._nodes = new Nodes( this, backend );
  115. this._animation = new Animation( this._nodes, this.info );
  116. this._attributes = new Attributes( backend );
  117. this._background = new Background( this, this._nodes );
  118. this._geometries = new Geometries( this._attributes, this.info );
  119. this._textures = new Textures( this, backend, this.info );
  120. this._pipelines = new Pipelines( backend, this._nodes );
  121. this._bindings = new Bindings( backend, this._nodes, this._textures, this._attributes, this._pipelines, this.info );
  122. this._objects = new RenderObjects( this, this._nodes, this._geometries, this._pipelines, this._bindings, this.info );
  123. this._renderLists = new RenderLists();
  124. this._bundles = new RenderBundles();
  125. this._renderContexts = new RenderContexts();
  126. //
  127. this._initialized = true;
  128. resolve();
  129. } );
  130. return this._initPromise;
  131. }
  132. get coordinateSystem() {
  133. return this.backend.coordinateSystem;
  134. }
  135. async compileAsync( scene, camera, targetScene = null ) {
  136. if ( this._initialized === false ) await this.init();
  137. // preserve render tree
  138. const nodeFrame = this._nodes.nodeFrame;
  139. const previousRenderId = nodeFrame.renderId;
  140. const previousRenderContext = this._currentRenderContext;
  141. const previousRenderObjectFunction = this._currentRenderObjectFunction;
  142. const previousCompilationPromises = this._compilationPromises;
  143. //
  144. const sceneRef = ( scene.isScene === true ) ? scene : _scene;
  145. if ( targetScene === null ) targetScene = scene;
  146. const renderTarget = this._renderTarget;
  147. const renderContext = this._renderContexts.get( targetScene, camera, renderTarget );
  148. const activeMipmapLevel = this._activeMipmapLevel;
  149. const compilationPromises = [];
  150. this._currentRenderContext = renderContext;
  151. this._currentRenderObjectFunction = this.renderObject;
  152. this._handleObjectFunction = this._createObjectPipeline;
  153. this._compilationPromises = compilationPromises;
  154. nodeFrame.renderId ++;
  155. //
  156. nodeFrame.update();
  157. //
  158. renderContext.depth = this.depth;
  159. renderContext.stencil = this.stencil;
  160. if ( ! renderContext.clippingContext ) renderContext.clippingContext = new ClippingContext();
  161. renderContext.clippingContext.updateGlobal( this, camera );
  162. //
  163. sceneRef.onBeforeRender( this, scene, camera, renderTarget );
  164. //
  165. const renderList = this._renderLists.get( scene, camera );
  166. renderList.begin();
  167. this._projectObject( scene, camera, 0, renderList );
  168. // include lights from target scene
  169. if ( targetScene !== scene ) {
  170. targetScene.traverseVisible( function ( object ) {
  171. if ( object.isLight && object.layers.test( camera.layers ) ) {
  172. renderList.pushLight( object );
  173. }
  174. } );
  175. }
  176. renderList.finish();
  177. //
  178. if ( renderTarget !== null ) {
  179. this._textures.updateRenderTarget( renderTarget, activeMipmapLevel );
  180. const renderTargetData = this._textures.get( renderTarget );
  181. renderContext.textures = renderTargetData.textures;
  182. renderContext.depthTexture = renderTargetData.depthTexture;
  183. } else {
  184. renderContext.textures = null;
  185. renderContext.depthTexture = null;
  186. }
  187. //
  188. this._nodes.updateScene( sceneRef );
  189. //
  190. this._background.update( sceneRef, renderList, renderContext );
  191. // process render lists
  192. const opaqueObjects = renderList.opaque;
  193. const transparentObjects = renderList.transparent;
  194. const lightsNode = renderList.lightsNode;
  195. if ( opaqueObjects.length > 0 ) this._renderObjects( opaqueObjects, camera, sceneRef, lightsNode );
  196. if ( transparentObjects.length > 0 ) this._renderObjects( transparentObjects, camera, sceneRef, lightsNode );
  197. // restore render tree
  198. nodeFrame.renderId = previousRenderId;
  199. this._currentRenderContext = previousRenderContext;
  200. this._currentRenderObjectFunction = previousRenderObjectFunction;
  201. this._compilationPromises = previousCompilationPromises;
  202. this._handleObjectFunction = this._renderObjectDirect;
  203. // wait for all promises setup by backends awaiting compilation/linking/pipeline creation to complete
  204. await Promise.all( compilationPromises );
  205. }
  206. async renderAsync( scene, camera ) {
  207. if ( this._initialized === false ) await this.init();
  208. const renderContext = this._renderScene( scene, camera );
  209. await this.backend.resolveTimestampAsync( renderContext, 'render' );
  210. }
  211. _renderBundle( bundle, sceneRef, lightsNode ) {
  212. const { object, camera, renderList } = bundle;
  213. const renderContext = this._currentRenderContext;
  214. const renderContextData = this.backend.get( renderContext );
  215. //
  216. const renderBundle = this._bundles.get( object, camera );
  217. const renderBundleData = this.backend.get( renderBundle );
  218. if ( renderBundleData.renderContexts === undefined ) renderBundleData.renderContexts = new Set();
  219. //
  220. const renderBundleNeedsUpdate = renderBundleData.renderContexts.has( renderContext ) === false || object.needsUpdate === true;
  221. renderBundleData.renderContexts.add( renderContext );
  222. if ( renderBundleNeedsUpdate ) {
  223. if ( renderContextData.renderObjects === undefined || object.needsUpdate === true ) {
  224. const nodeFrame = this._nodes.nodeFrame;
  225. renderContextData.renderObjects = [];
  226. renderContextData.renderBundles = [];
  227. renderContextData.scene = sceneRef;
  228. renderContextData.camera = camera;
  229. renderContextData.renderId = nodeFrame.renderId;
  230. renderContextData.registerBundlesPhase = true;
  231. }
  232. this._currentRenderBundle = renderBundle;
  233. const opaqueObjects = renderList.opaque;
  234. if ( opaqueObjects.length > 0 ) this._renderObjects( opaqueObjects, camera, sceneRef, lightsNode );
  235. this._currentRenderBundle = null;
  236. //
  237. object.needsUpdate = false;
  238. } else {
  239. const renderContext = this._currentRenderContext;
  240. const renderContextData = this.backend.get( renderContext );
  241. for ( let i = 0, l = renderContextData.renderObjects.length; i < l; i ++ ) {
  242. const renderObject = renderContextData.renderObjects[ i ];
  243. this._nodes.updateBefore( renderObject );
  244. //
  245. renderObject.object.modelViewMatrix.multiplyMatrices( camera.matrixWorldInverse, renderObject.object.matrixWorld );
  246. renderObject.object.normalMatrix.getNormalMatrix( renderObject.object.modelViewMatrix );
  247. this._nodes.updateForRender( renderObject );
  248. this._bindings.updateForRender( renderObject );
  249. this.backend.draw( renderObject, this.info );
  250. this._nodes.updateAfter( renderObject );
  251. }
  252. }
  253. }
  254. render( scene, camera ) {
  255. if ( this._initialized === false ) {
  256. console.warn( 'THREE.Renderer: .render() called before the backend is initialized. Try using .renderAsync() instead.' );
  257. return this.renderAsync( scene, camera );
  258. }
  259. this._renderScene( scene, camera );
  260. }
  261. _getFrameBufferTarget() {
  262. const { currentColorSpace } = this;
  263. const useToneMapping = this._renderTarget === null && ( this.toneMapping !== NoToneMapping || this.toneMappingNode !== null );
  264. const useColorSpace = currentColorSpace !== LinearSRGBColorSpace && currentColorSpace !== NoColorSpace;
  265. if ( useToneMapping === false && useColorSpace === false ) return null;
  266. const { width, height } = this.getDrawingBufferSize( _drawingBufferSize );
  267. const { depth, stencil } = this;
  268. let frameBufferTarget = this._frameBufferTarget;
  269. if ( frameBufferTarget === null ) {
  270. frameBufferTarget = new RenderTarget( width, height, {
  271. depthBuffer: depth,
  272. stencilBuffer: stencil,
  273. type: HalfFloatType, // FloatType
  274. format: RGBAFormat,
  275. colorSpace: LinearSRGBColorSpace,
  276. generateMipmaps: false,
  277. minFilter: LinearFilter,
  278. magFilter: LinearFilter,
  279. samples: this.backend.parameters.antialias ? 4 : 0
  280. } );
  281. frameBufferTarget.isPostProcessingRenderTarget = true;
  282. this._frameBufferTarget = frameBufferTarget;
  283. }
  284. frameBufferTarget.depthBuffer = depth;
  285. frameBufferTarget.stencilBuffer = stencil;
  286. frameBufferTarget.setSize( width, height );
  287. frameBufferTarget.viewport.copy( this._viewport );
  288. frameBufferTarget.scissor.copy( this._scissor );
  289. frameBufferTarget.viewport.multiplyScalar( this._pixelRatio );
  290. frameBufferTarget.scissor.multiplyScalar( this._pixelRatio );
  291. frameBufferTarget.scissorTest = this._scissorTest;
  292. return frameBufferTarget;
  293. }
  294. _renderScene( scene, camera, useFrameBufferTarget = true ) {
  295. const frameBufferTarget = useFrameBufferTarget ? this._getFrameBufferTarget() : null;
  296. // preserve render tree
  297. const nodeFrame = this._nodes.nodeFrame;
  298. const previousRenderId = nodeFrame.renderId;
  299. const previousRenderContext = this._currentRenderContext;
  300. const previousRenderObjectFunction = this._currentRenderObjectFunction;
  301. //
  302. const sceneRef = ( scene.isScene === true ) ? scene : _scene;
  303. const outputRenderTarget = this._renderTarget;
  304. const activeCubeFace = this._activeCubeFace;
  305. const activeMipmapLevel = this._activeMipmapLevel;
  306. //
  307. let renderTarget;
  308. if ( frameBufferTarget !== null ) {
  309. renderTarget = frameBufferTarget;
  310. this.setRenderTarget( renderTarget );
  311. } else {
  312. renderTarget = outputRenderTarget;
  313. }
  314. //
  315. const renderContext = this._renderContexts.get( scene, camera, renderTarget );
  316. this._currentRenderContext = renderContext;
  317. this._currentRenderObjectFunction = this._renderObjectFunction || this.renderObject;
  318. //
  319. this.info.calls ++;
  320. this.info.render.calls ++;
  321. nodeFrame.renderId = this.info.calls;
  322. //
  323. const coordinateSystem = this.coordinateSystem;
  324. if ( camera.coordinateSystem !== coordinateSystem ) {
  325. camera.coordinateSystem = coordinateSystem;
  326. camera.updateProjectionMatrix();
  327. }
  328. //
  329. if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
  330. if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
  331. //
  332. let viewport = this._viewport;
  333. let scissor = this._scissor;
  334. let pixelRatio = this._pixelRatio;
  335. if ( renderTarget !== null ) {
  336. viewport = renderTarget.viewport;
  337. scissor = renderTarget.scissor;
  338. pixelRatio = 1;
  339. }
  340. this.getDrawingBufferSize( _drawingBufferSize );
  341. _screen.set( 0, 0, _drawingBufferSize.width, _drawingBufferSize.height );
  342. const minDepth = ( viewport.minDepth === undefined ) ? 0 : viewport.minDepth;
  343. const maxDepth = ( viewport.maxDepth === undefined ) ? 1 : viewport.maxDepth;
  344. renderContext.viewportValue.copy( viewport ).multiplyScalar( pixelRatio ).floor();
  345. renderContext.viewportValue.width >>= activeMipmapLevel;
  346. renderContext.viewportValue.height >>= activeMipmapLevel;
  347. renderContext.viewportValue.minDepth = minDepth;
  348. renderContext.viewportValue.maxDepth = maxDepth;
  349. renderContext.viewport = renderContext.viewportValue.equals( _screen ) === false;
  350. renderContext.scissorValue.copy( scissor ).multiplyScalar( pixelRatio ).floor();
  351. renderContext.scissor = this._scissorTest && renderContext.scissorValue.equals( _screen ) === false;
  352. renderContext.scissorValue.width >>= activeMipmapLevel;
  353. renderContext.scissorValue.height >>= activeMipmapLevel;
  354. if ( ! renderContext.clippingContext ) renderContext.clippingContext = new ClippingContext();
  355. renderContext.clippingContext.updateGlobal( this, camera );
  356. //
  357. sceneRef.onBeforeRender( this, scene, camera, renderTarget );
  358. //
  359. _projScreenMatrix.multiplyMatrices( camera.projectionMatrix, camera.matrixWorldInverse );
  360. _frustum.setFromProjectionMatrix( _projScreenMatrix, coordinateSystem );
  361. const renderList = this._renderLists.get( scene, camera );
  362. renderList.begin();
  363. this._projectObject( scene, camera, 0, renderList );
  364. renderList.finish();
  365. if ( this.sortObjects === true ) {
  366. renderList.sort( this._opaqueSort, this._transparentSort );
  367. }
  368. //
  369. if ( renderTarget !== null ) {
  370. this._textures.updateRenderTarget( renderTarget, activeMipmapLevel );
  371. const renderTargetData = this._textures.get( renderTarget );
  372. renderContext.textures = renderTargetData.textures;
  373. renderContext.depthTexture = renderTargetData.depthTexture;
  374. renderContext.width = renderTargetData.width;
  375. renderContext.height = renderTargetData.height;
  376. renderContext.renderTarget = renderTarget;
  377. renderContext.depth = renderTarget.depthBuffer;
  378. renderContext.stencil = renderTarget.stencilBuffer;
  379. } else {
  380. renderContext.textures = null;
  381. renderContext.depthTexture = null;
  382. renderContext.width = this.domElement.width;
  383. renderContext.height = this.domElement.height;
  384. renderContext.depth = this.depth;
  385. renderContext.stencil = this.stencil;
  386. }
  387. renderContext.width >>= activeMipmapLevel;
  388. renderContext.height >>= activeMipmapLevel;
  389. renderContext.activeCubeFace = activeCubeFace;
  390. renderContext.activeMipmapLevel = activeMipmapLevel;
  391. renderContext.occlusionQueryCount = renderList.occlusionQueryCount;
  392. //
  393. this._nodes.updateScene( sceneRef );
  394. //
  395. this._background.update( sceneRef, renderList, renderContext );
  396. //
  397. this.backend.beginRender( renderContext );
  398. // process render lists
  399. const opaqueObjects = renderList.opaque;
  400. const transparentObjects = renderList.transparent;
  401. const bundles = renderList.bundles;
  402. const lightsNode = renderList.lightsNode;
  403. if ( bundles.length > 0 ) this._renderBundles( bundles, sceneRef, lightsNode );
  404. if ( opaqueObjects.length > 0 ) this._renderObjects( opaqueObjects, camera, sceneRef, lightsNode );
  405. if ( transparentObjects.length > 0 ) this._renderObjects( transparentObjects, camera, sceneRef, lightsNode );
  406. // finish render pass
  407. this.backend.finishRender( renderContext );
  408. // restore render tree
  409. nodeFrame.renderId = previousRenderId;
  410. this._currentRenderContext = previousRenderContext;
  411. this._currentRenderObjectFunction = previousRenderObjectFunction;
  412. //
  413. if ( frameBufferTarget !== null ) {
  414. this.setRenderTarget( outputRenderTarget, activeCubeFace, activeMipmapLevel );
  415. _quad.material.fragmentNode = this._nodes.getOutputNode( renderTarget.texture );
  416. this._renderScene( _quad, _quad.camera, false );
  417. }
  418. //
  419. sceneRef.onAfterRender( this, scene, camera, renderTarget );
  420. //
  421. return renderContext;
  422. }
  423. getMaxAnisotropy() {
  424. return this.backend.getMaxAnisotropy();
  425. }
  426. getActiveCubeFace() {
  427. return this._activeCubeFace;
  428. }
  429. getActiveMipmapLevel() {
  430. return this._activeMipmapLevel;
  431. }
  432. async setAnimationLoop( callback ) {
  433. if ( this._initialized === false ) await this.init();
  434. this._animation.setAnimationLoop( callback );
  435. }
  436. async getArrayBufferAsync( attribute ) {
  437. return await this.backend.getArrayBufferAsync( attribute );
  438. }
  439. getContext() {
  440. return this.backend.getContext();
  441. }
  442. getPixelRatio() {
  443. return this._pixelRatio;
  444. }
  445. getDrawingBufferSize( target ) {
  446. return target.set( this._width * this._pixelRatio, this._height * this._pixelRatio ).floor();
  447. }
  448. getSize( target ) {
  449. return target.set( this._width, this._height );
  450. }
  451. setPixelRatio( value = 1 ) {
  452. this._pixelRatio = value;
  453. this.setSize( this._width, this._height, false );
  454. }
  455. setDrawingBufferSize( width, height, pixelRatio ) {
  456. this._width = width;
  457. this._height = height;
  458. this._pixelRatio = pixelRatio;
  459. this.domElement.width = Math.floor( width * pixelRatio );
  460. this.domElement.height = Math.floor( height * pixelRatio );
  461. this.setViewport( 0, 0, width, height );
  462. if ( this._initialized ) this.backend.updateSize();
  463. }
  464. setSize( width, height, updateStyle = true ) {
  465. this._width = width;
  466. this._height = height;
  467. this.domElement.width = Math.floor( width * this._pixelRatio );
  468. this.domElement.height = Math.floor( height * this._pixelRatio );
  469. if ( updateStyle === true ) {
  470. this.domElement.style.width = width + 'px';
  471. this.domElement.style.height = height + 'px';
  472. }
  473. this.setViewport( 0, 0, width, height );
  474. if ( this._initialized ) this.backend.updateSize();
  475. }
  476. setOpaqueSort( method ) {
  477. this._opaqueSort = method;
  478. }
  479. setTransparentSort( method ) {
  480. this._transparentSort = method;
  481. }
  482. getScissor( target ) {
  483. const scissor = this._scissor;
  484. target.x = scissor.x;
  485. target.y = scissor.y;
  486. target.width = scissor.width;
  487. target.height = scissor.height;
  488. return target;
  489. }
  490. setScissor( x, y, width, height ) {
  491. const scissor = this._scissor;
  492. if ( x.isVector4 ) {
  493. scissor.copy( x );
  494. } else {
  495. scissor.set( x, y, width, height );
  496. }
  497. }
  498. getScissorTest() {
  499. return this._scissorTest;
  500. }
  501. setScissorTest( boolean ) {
  502. this._scissorTest = boolean;
  503. this.backend.setScissorTest( boolean );
  504. }
  505. getViewport( target ) {
  506. return target.copy( this._viewport );
  507. }
  508. setViewport( x, y, width, height, minDepth = 0, maxDepth = 1 ) {
  509. const viewport = this._viewport;
  510. if ( x.isVector4 ) {
  511. viewport.copy( x );
  512. } else {
  513. viewport.set( x, y, width, height );
  514. }
  515. viewport.minDepth = minDepth;
  516. viewport.maxDepth = maxDepth;
  517. }
  518. getClearColor( target ) {
  519. return target.copy( this._clearColor );
  520. }
  521. setClearColor( color, alpha = 1 ) {
  522. this._clearColor.set( color );
  523. this._clearColor.a = alpha;
  524. }
  525. getClearAlpha() {
  526. return this._clearColor.a;
  527. }
  528. setClearAlpha( alpha ) {
  529. this._clearColor.a = alpha;
  530. }
  531. getClearDepth() {
  532. return this._clearDepth;
  533. }
  534. setClearDepth( depth ) {
  535. this._clearDepth = depth;
  536. }
  537. getClearStencil() {
  538. return this._clearStencil;
  539. }
  540. setClearStencil( stencil ) {
  541. this._clearStencil = stencil;
  542. }
  543. isOccluded( object ) {
  544. const renderContext = this._currentRenderContext;
  545. return renderContext && this.backend.isOccluded( renderContext, object );
  546. }
  547. clear( color = true, depth = true, stencil = true ) {
  548. if ( this._initialized === false ) {
  549. console.warn( 'THREE.Renderer: .clear() called before the backend is initialized. Try using .clearAsync() instead.' );
  550. return this.clearAsync( color, depth, stencil );
  551. }
  552. const renderTarget = this._renderTarget || this._getFrameBufferTarget();
  553. let renderTargetData = null;
  554. if ( renderTarget !== null ) {
  555. this._textures.updateRenderTarget( renderTarget );
  556. renderTargetData = this._textures.get( renderTarget );
  557. }
  558. this.backend.clear( color, depth, stencil, renderTargetData );
  559. if ( renderTarget !== null && this._renderTarget === null ) {
  560. // If a color space transform or tone mapping is required,
  561. // the clear operation clears the intermediate renderTarget texture, but does not update the screen canvas.
  562. _quad.material.fragmentNode = this._nodes.getOutputNode( renderTarget.texture );
  563. this._renderScene( _quad, _quad.camera, false );
  564. }
  565. }
  566. clearColor() {
  567. return this.clear( true, false, false );
  568. }
  569. clearDepth() {
  570. return this.clear( false, true, false );
  571. }
  572. clearStencil() {
  573. return this.clear( false, false, true );
  574. }
  575. async clearAsync( color = true, depth = true, stencil = true ) {
  576. if ( this._initialized === false ) await this.init();
  577. this.clear( color, depth, stencil );
  578. }
  579. clearColorAsync() {
  580. return this.clearAsync( true, false, false );
  581. }
  582. clearDepthAsync() {
  583. return this.clearAsync( false, true, false );
  584. }
  585. clearStencilAsync() {
  586. return this.clearAsync( false, false, true );
  587. }
  588. get currentColorSpace() {
  589. const renderTarget = this._renderTarget;
  590. if ( renderTarget !== null ) {
  591. const texture = renderTarget.texture;
  592. return ( Array.isArray( texture ) ? texture[ 0 ] : texture ).colorSpace;
  593. }
  594. return this.outputColorSpace;
  595. }
  596. dispose() {
  597. this.info.dispose();
  598. this._animation.dispose();
  599. this._objects.dispose();
  600. this._pipelines.dispose();
  601. this._nodes.dispose();
  602. this._bindings.dispose();
  603. this._renderLists.dispose();
  604. this._renderContexts.dispose();
  605. this._textures.dispose();
  606. this.setRenderTarget( null );
  607. this.setAnimationLoop( null );
  608. }
  609. setRenderTarget( renderTarget, activeCubeFace = 0, activeMipmapLevel = 0 ) {
  610. this._renderTarget = renderTarget;
  611. this._activeCubeFace = activeCubeFace;
  612. this._activeMipmapLevel = activeMipmapLevel;
  613. }
  614. getRenderTarget() {
  615. return this._renderTarget;
  616. }
  617. setRenderObjectFunction( renderObjectFunction ) {
  618. this._renderObjectFunction = renderObjectFunction;
  619. }
  620. getRenderObjectFunction() {
  621. return this._renderObjectFunction;
  622. }
  623. async computeAsync( computeNodes ) {
  624. if ( this._initialized === false ) await this.init();
  625. const nodeFrame = this._nodes.nodeFrame;
  626. const previousRenderId = nodeFrame.renderId;
  627. //
  628. this.info.calls ++;
  629. this.info.compute.calls ++;
  630. this.info.compute.computeCalls ++;
  631. nodeFrame.renderId = this.info.calls;
  632. //
  633. const backend = this.backend;
  634. const pipelines = this._pipelines;
  635. const bindings = this._bindings;
  636. const nodes = this._nodes;
  637. const computeList = Array.isArray( computeNodes ) ? computeNodes : [ computeNodes ];
  638. if ( computeList[ 0 ] === undefined || computeList[ 0 ].isComputeNode !== true ) {
  639. throw new Error( 'THREE.Renderer: .compute() expects a ComputeNode.' );
  640. }
  641. backend.beginCompute( computeNodes );
  642. for ( const computeNode of computeList ) {
  643. // onInit
  644. if ( pipelines.has( computeNode ) === false ) {
  645. const dispose = () => {
  646. computeNode.removeEventListener( 'dispose', dispose );
  647. pipelines.delete( computeNode );
  648. bindings.delete( computeNode );
  649. nodes.delete( computeNode );
  650. };
  651. computeNode.addEventListener( 'dispose', dispose );
  652. //
  653. computeNode.onInit( { renderer: this } );
  654. }
  655. nodes.updateForCompute( computeNode );
  656. bindings.updateForCompute( computeNode );
  657. const computeBindings = bindings.getForCompute( computeNode );
  658. const computePipeline = pipelines.getForCompute( computeNode, computeBindings );
  659. backend.compute( computeNodes, computeNode, computeBindings, computePipeline );
  660. }
  661. backend.finishCompute( computeNodes );
  662. await this.backend.resolveTimestampAsync( computeNodes, 'compute' );
  663. //
  664. nodeFrame.renderId = previousRenderId;
  665. }
  666. async hasFeatureAsync( name ) {
  667. if ( this._initialized === false ) await this.init();
  668. return this.backend.hasFeature( name );
  669. }
  670. hasFeature( name ) {
  671. if ( this._initialized === false ) {
  672. console.warn( 'THREE.Renderer: .hasFeature() called before the backend is initialized. Try using .hasFeatureAsync() instead.' );
  673. return false;
  674. }
  675. return this.backend.hasFeature( name );
  676. }
  677. copyFramebufferToTexture( framebufferTexture ) {
  678. const renderContext = this._currentRenderContext;
  679. this._textures.updateTexture( framebufferTexture );
  680. this.backend.copyFramebufferToTexture( framebufferTexture, renderContext );
  681. }
  682. copyTextureToTexture( srcTexture, dstTexture, srcRegion = null, dstPosition = null, level = 0 ) {
  683. this._textures.updateTexture( srcTexture );
  684. this._textures.updateTexture( dstTexture );
  685. this.backend.copyTextureToTexture( srcTexture, dstTexture, srcRegion, dstPosition, level );
  686. }
  687. readRenderTargetPixelsAsync( renderTarget, x, y, width, height, index = 0 ) {
  688. return this.backend.copyTextureToBuffer( renderTarget.textures[ index ], x, y, width, height );
  689. }
  690. _projectObject( object, camera, groupOrder, renderList ) {
  691. if ( object.visible === false ) return;
  692. const visible = object.layers.test( camera.layers );
  693. if ( visible ) {
  694. if ( object.isGroup ) {
  695. groupOrder = object.renderOrder;
  696. } else if ( object.isLOD ) {
  697. if ( object.autoUpdate === true ) object.update( camera );
  698. } else if ( object.isLight ) {
  699. renderList.pushLight( object );
  700. } else if ( object.isSprite ) {
  701. if ( ! object.frustumCulled || _frustum.intersectsSprite( object ) ) {
  702. if ( this.sortObjects === true ) {
  703. _vector3.setFromMatrixPosition( object.matrixWorld ).applyMatrix4( _projScreenMatrix );
  704. }
  705. const geometry = object.geometry;
  706. const material = object.material;
  707. if ( material.visible ) {
  708. renderList.push( object, geometry, material, groupOrder, _vector3.z, null );
  709. }
  710. }
  711. } else if ( object.isLineLoop ) {
  712. console.error( 'THREE.Renderer: Objects of type THREE.LineLoop are not supported. Please use THREE.Line or THREE.LineSegments.' );
  713. } else if ( object.isMesh || object.isLine || object.isPoints ) {
  714. if ( ! object.frustumCulled || _frustum.intersectsObject( object ) ) {
  715. const geometry = object.geometry;
  716. const material = object.material;
  717. if ( this.sortObjects === true ) {
  718. if ( geometry.boundingSphere === null ) geometry.computeBoundingSphere();
  719. _vector3
  720. .copy( geometry.boundingSphere.center )
  721. .applyMatrix4( object.matrixWorld )
  722. .applyMatrix4( _projScreenMatrix );
  723. }
  724. if ( Array.isArray( material ) ) {
  725. const groups = geometry.groups;
  726. for ( let i = 0, l = groups.length; i < l; i ++ ) {
  727. const group = groups[ i ];
  728. const groupMaterial = material[ group.materialIndex ];
  729. if ( groupMaterial && groupMaterial.visible ) {
  730. renderList.push( object, geometry, groupMaterial, groupOrder, _vector3.z, group );
  731. }
  732. }
  733. } else if ( material.visible ) {
  734. renderList.push( object, geometry, material, groupOrder, _vector3.z, null );
  735. }
  736. }
  737. }
  738. }
  739. if ( object.static === true ) {
  740. const baseRenderList = renderList;
  741. // replace render list
  742. renderList = this._renderLists.get( object, camera );
  743. renderList.begin();
  744. baseRenderList.pushBundle( {
  745. object,
  746. camera,
  747. renderList,
  748. } );
  749. renderList.finish();
  750. }
  751. const children = object.children;
  752. for ( let i = 0, l = children.length; i < l; i ++ ) {
  753. this._projectObject( children[ i ], camera, groupOrder, renderList );
  754. }
  755. }
  756. _renderBundles( bundles, sceneRef, lightsNode ) {
  757. for ( const bundle of bundles ) {
  758. this._renderBundle( bundle, sceneRef, lightsNode );
  759. }
  760. }
  761. _renderObjects( renderList, camera, scene, lightsNode ) {
  762. // process renderable objects
  763. for ( let i = 0, il = renderList.length; i < il; i ++ ) {
  764. const renderItem = renderList[ i ];
  765. // @TODO: Add support for multiple materials per object. This will require to extract
  766. // the material from the renderItem object and pass it with its group data to renderObject().
  767. const { object, geometry, material, group } = renderItem;
  768. if ( camera.isArrayCamera ) {
  769. const cameras = camera.cameras;
  770. for ( let j = 0, jl = cameras.length; j < jl; j ++ ) {
  771. const camera2 = cameras[ j ];
  772. if ( object.layers.test( camera2.layers ) ) {
  773. const vp = camera2.viewport;
  774. const minDepth = ( vp.minDepth === undefined ) ? 0 : vp.minDepth;
  775. const maxDepth = ( vp.maxDepth === undefined ) ? 1 : vp.maxDepth;
  776. const viewportValue = this._currentRenderContext.viewportValue;
  777. viewportValue.copy( vp ).multiplyScalar( this._pixelRatio ).floor();
  778. viewportValue.minDepth = minDepth;
  779. viewportValue.maxDepth = maxDepth;
  780. this.backend.updateViewport( this._currentRenderContext );
  781. this._currentRenderObjectFunction( object, scene, camera2, geometry, material, group, lightsNode );
  782. }
  783. }
  784. } else {
  785. this._currentRenderObjectFunction( object, scene, camera, geometry, material, group, lightsNode );
  786. }
  787. }
  788. }
  789. renderObject( object, scene, camera, geometry, material, group, lightsNode ) {
  790. let overridePositionNode;
  791. let overrideFragmentNode;
  792. let overrideDepthNode;
  793. //
  794. object.onBeforeRender( this, scene, camera, geometry, material, group );
  795. material.onBeforeRender( this, scene, camera, geometry, material, group );
  796. //
  797. if ( scene.overrideMaterial !== null ) {
  798. const overrideMaterial = scene.overrideMaterial;
  799. if ( material.positionNode && material.positionNode.isNode ) {
  800. overridePositionNode = overrideMaterial.positionNode;
  801. overrideMaterial.positionNode = material.positionNode;
  802. }
  803. if ( overrideMaterial.isShadowNodeMaterial ) {
  804. overrideMaterial.side = material.shadowSide === null ? material.side : material.shadowSide;
  805. if ( material.depthNode && material.depthNode.isNode ) {
  806. overrideDepthNode = overrideMaterial.depthNode;
  807. overrideMaterial.depthNode = material.depthNode;
  808. }
  809. if ( material.shadowNode && material.shadowNode.isNode ) {
  810. overrideFragmentNode = overrideMaterial.fragmentNode;
  811. overrideMaterial.fragmentNode = material.shadowNode;
  812. }
  813. if ( this.localClippingEnabled ) {
  814. if ( material.clipShadows ) {
  815. if ( overrideMaterial.clippingPlanes !== material.clippingPlanes ) {
  816. overrideMaterial.clippingPlanes = material.clippingPlanes;
  817. overrideMaterial.needsUpdate = true;
  818. }
  819. if ( overrideMaterial.clipIntersection !== material.clipIntersection ) {
  820. overrideMaterial.clipIntersection = material.clipIntersection;
  821. }
  822. } else if ( Array.isArray( overrideMaterial.clippingPlanes ) ) {
  823. overrideMaterial.clippingPlanes = null;
  824. overrideMaterial.needsUpdate = true;
  825. }
  826. }
  827. }
  828. material = overrideMaterial;
  829. }
  830. //
  831. if ( material.transparent === true && material.side === DoubleSide && material.forceSinglePass === false ) {
  832. material.side = BackSide;
  833. this._handleObjectFunction( object, material, scene, camera, lightsNode, group, 'backSide' ); // create backSide pass id
  834. material.side = FrontSide;
  835. this._handleObjectFunction( object, material, scene, camera, lightsNode, group ); // use default pass id
  836. material.side = DoubleSide;
  837. } else {
  838. this._handleObjectFunction( object, material, scene, camera, lightsNode, group );
  839. }
  840. //
  841. if ( overridePositionNode !== undefined ) {
  842. scene.overrideMaterial.positionNode = overridePositionNode;
  843. }
  844. if ( overrideDepthNode !== undefined ) {
  845. scene.overrideMaterial.depthNode = overrideDepthNode;
  846. }
  847. if ( overrideFragmentNode !== undefined ) {
  848. scene.overrideMaterial.fragmentNode = overrideFragmentNode;
  849. }
  850. //
  851. object.onAfterRender( this, scene, camera, geometry, material, group );
  852. }
  853. _renderObjectDirect( object, material, scene, camera, lightsNode, group, passId ) {
  854. const renderObject = this._objects.get( object, material, scene, camera, lightsNode, this._currentRenderContext, passId );
  855. renderObject.drawRange = group || object.geometry.drawRange;
  856. //
  857. this._nodes.updateBefore( renderObject );
  858. //
  859. object.modelViewMatrix.multiplyMatrices( camera.matrixWorldInverse, object.matrixWorld );
  860. object.normalMatrix.getNormalMatrix( object.modelViewMatrix );
  861. //
  862. this._nodes.updateForRender( renderObject );
  863. this._geometries.updateForRender( renderObject );
  864. this._bindings.updateForRender( renderObject );
  865. this._pipelines.updateForRender( renderObject );
  866. //
  867. if ( this._currentRenderBundle !== null && this._currentRenderBundle.needsUpdate === true ) {
  868. const renderObjectData = this.backend.get( renderObject );
  869. renderObjectData.bundleEncoder = undefined;
  870. renderObjectData.lastPipelineGPU = undefined;
  871. }
  872. this.backend.draw( renderObject, this.info );
  873. if ( this._currentRenderBundle !== null ) {
  874. const renderContextData = this.backend.get( this._currentRenderContext );
  875. renderContextData.renderObjects.push( renderObject );
  876. }
  877. this._nodes.updateAfter( renderObject );
  878. }
  879. _createObjectPipeline( object, material, scene, camera, lightsNode, passId ) {
  880. const renderObject = this._objects.get( object, material, scene, camera, lightsNode, this._currentRenderContext, passId );
  881. //
  882. this._nodes.updateBefore( renderObject );
  883. //
  884. this._nodes.updateForRender( renderObject );
  885. this._geometries.updateForRender( renderObject );
  886. this._bindings.updateForRender( renderObject );
  887. this._pipelines.getForRender( renderObject, this._compilationPromises );
  888. this._nodes.updateAfter( renderObject );
  889. }
  890. get compute() {
  891. return this.computeAsync;
  892. }
  893. get compile() {
  894. return this.compileAsync;
  895. }
  896. }
  897. export default Renderer;