webgl_loader_ww_meshspray.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Mesh Spray - Worker based mesh spray</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7. <style>
  8. body {
  9. font-family: Monospace;
  10. background-color: #000;
  11. color: #fff;
  12. margin: 0 0 0 0;
  13. padding: 0 0 0 0;
  14. border: none;
  15. cursor: default;
  16. }
  17. #info {
  18. color: #fff;
  19. position: absolute;
  20. top: 10px;
  21. width: 100%;
  22. text-align: center;
  23. z-index: 100;
  24. display:block;
  25. }
  26. #info a {
  27. color: #f00;
  28. font-weight: bold;
  29. text-decoration: underline;
  30. cursor: pointer
  31. }
  32. #glFullscreen {
  33. width: 100%;
  34. height: 100vh;
  35. min-width: 640px;
  36. min-height: 360px;
  37. position: relative;
  38. overflow: hidden;
  39. z-index: 0;
  40. }
  41. #example {
  42. width: 100%;
  43. height: 100%;
  44. top: 0;
  45. left: 0;
  46. background-color: #000000;
  47. }
  48. #feedback {
  49. color: darkorange;
  50. }
  51. #dat {
  52. user-select: none;
  53. position: absolute;
  54. left: 0;
  55. top: 0;
  56. z-Index: 200;
  57. }
  58. </style>
  59. </head>
  60. <body>
  61. <div id="glFullscreen">
  62. <canvas id="example"></canvas>
  63. </div>
  64. <div id="dat">
  65. </div>
  66. <div id="info">
  67. <a href="http://threejs.org" target="_blank">three.js</a> - Mesh Spray
  68. <div id="feedback"></div>
  69. </div>
  70. <script src="js/Detector.js"></script>
  71. <script src="../build/three.js"></script>
  72. <script src="js/controls/TrackballControls.js"></script>
  73. <script src="js/loaders/MTLLoader.js"></script>
  74. <script src="js/libs/dat.gui.min.js"></script>
  75. <script src="js/loaders/LoaderSupport.js"></script>
  76. <script src="js/loaders/OBJLoader2.js"></script>
  77. <script>
  78. /**
  79. * @author Kai Salmen / www.kaisalmen.de
  80. */
  81. 'use strict';
  82. var MeshSpray = (function () {
  83. var Validator = THREE.LoaderSupport.Validator;
  84. MeshSpray.prototype = Object.create( THREE.LoaderSupport.Commons.prototype );
  85. MeshSpray.prototype.constructor = MeshSpray;
  86. function MeshSpray( manager ) {
  87. THREE.LoaderSupport.Commons.call( this, manager );
  88. this.workerSupport = null;
  89. };
  90. MeshSpray.prototype.run = function ( prepData, workerSupportExternal ) {
  91. console.time( 'MeshSpray' );
  92. this._applyPrepData( prepData );
  93. var scope = this;
  94. var scopeBuilderFunc = function ( payload ) {
  95. var meshes = scope.builder.buildMeshes( payload );
  96. var mesh;
  97. for ( var i in meshes ) {
  98. mesh = meshes[ i ];
  99. scope.loaderRootNode.add( mesh );
  100. }
  101. };
  102. var scopeFuncComplete = function ( message ) {
  103. var callback = scope.callbacks.onLoad;
  104. if ( Validator.isValid( callback ) ) callback( scope.loaderRootNode, scope.modelName, scope.instanceNo, message );
  105. console.timeEnd( 'MeshSpray' );
  106. };
  107. this.workerSupport = Validator.verifyInput( workerSupportExternal, this.workerSupport );
  108. this.workerSupport = Validator.verifyInput( this.workerSupport, new THREE.LoaderSupport.WorkerSupport() );
  109. var buildCode = function ( funcBuildObject, funcBuildSingelton ) {
  110. var workerCode = '';
  111. workerCode += '/**\n';
  112. workerCode += ' * This code was constructed by MeshSpray buildWorkerCode.\n';
  113. workerCode += ' */\n\n';
  114. workerCode += funcBuildObject( 'Validator', Validator );
  115. workerCode += funcBuildSingelton( 'Parser', 'Parser', Parser );
  116. return workerCode;
  117. };
  118. this.workerSupport.validate( buildCode, false );
  119. this.workerSupport.setCallbacks( scopeBuilderFunc, scopeFuncComplete );
  120. this.workerSupport.run(
  121. {
  122. cmd: 'run',
  123. params: {
  124. debug: this.debug,
  125. dimension: prepData.dimension,
  126. quantity: prepData.quantity,
  127. globalObjectCount: prepData.globalObjectCount
  128. },
  129. materials: {
  130. materialNames: this.builder.materialNames
  131. },
  132. buffers: {
  133. input: null
  134. }
  135. }
  136. );
  137. };
  138. var Parser = ( function () {
  139. function Parser() {
  140. this.sizeFactor = 0.5;
  141. this.localOffsetFactor = 1.0;
  142. this.globalObjectCount = 0;
  143. this.debug = false;
  144. this.dimension = 200;
  145. this.quantity = 1;
  146. this.callbackBuilder = null;
  147. };
  148. Parser.prototype.parse = function () {
  149. var materialDescription;
  150. var materialDescriptions = [];
  151. var materialGroups = [];
  152. materialDescription = {
  153. name: 'Gen',
  154. flat: false,
  155. vertexColors: true,
  156. default: true
  157. };
  158. materialDescriptions.push( materialDescription );
  159. var baseTriangle = [ 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 0.0, -1.0, 1.0 ];
  160. var vertices = [];
  161. var colors = [];
  162. var normals = [];
  163. var uvs = [];
  164. var dimensionHalf = this.dimension / 2;
  165. var fixedOffsetX;
  166. var fixedOffsetY;
  167. var fixedOffsetZ;
  168. var s, t;
  169. // complete triagle
  170. var sizeVaring = this.sizeFactor * Math.random();
  171. // local coords offset
  172. var localOffsetFactor = this.localOffsetFactor;
  173. for ( var i = 0; i < this.quantity; i++ ) {
  174. sizeVaring = this.sizeFactor * Math.random();
  175. s = 2 * Math.PI * Math.random();
  176. t = Math.PI * Math.random();
  177. fixedOffsetX = dimensionHalf * Math.random() * Math.cos( s ) * Math.sin( t );
  178. fixedOffsetY = dimensionHalf * Math.random() * Math.sin( s ) * Math.sin( t );
  179. fixedOffsetZ = dimensionHalf * Math.random() * Math.cos( t );
  180. for ( var j = 0; j < baseTriangle.length; j += 3 ) {
  181. vertices.push( baseTriangle[ j ] * sizeVaring + localOffsetFactor * Math.random() + fixedOffsetX );
  182. vertices.push( baseTriangle[ j + 1 ] * sizeVaring + localOffsetFactor * Math.random() + fixedOffsetY );
  183. vertices.push( baseTriangle[ j + 2 ] * sizeVaring + localOffsetFactor * Math.random() + fixedOffsetZ );
  184. colors.push( Math.random() );
  185. colors.push( Math.random() );
  186. colors.push( Math.random() );
  187. }
  188. }
  189. var absoluteVertexCount = vertices.length;
  190. var absoluteColorCount = colors.length;
  191. var absoluteNormalCount = 0;
  192. var absoluteUvCount = 0;
  193. var vertexFA = new Float32Array( absoluteVertexCount );
  194. var colorFA = ( absoluteColorCount > 0 ) ? new Float32Array( absoluteColorCount ) : null;
  195. var normalFA = ( absoluteNormalCount > 0 ) ? new Float32Array( absoluteNormalCount ) : null;
  196. var uvFA = ( absoluteUvCount > 0 ) ? new Float32Array( absoluteUvCount ) : null;
  197. vertexFA.set( vertices, 0 );
  198. if ( colorFA ) {
  199. colorFA.set( colors, 0 );
  200. }
  201. if ( normalFA ) {
  202. normalFA.set( normals, 0 );
  203. }
  204. if ( uvFA ) {
  205. uvFA.set( uvs, 0 );
  206. }
  207. this.globalObjectCount++;
  208. this.callbackBuilder(
  209. {
  210. cmd: 'meshData',
  211. params: {
  212. meshName: 'Gen' + this.globalObjectCount
  213. },
  214. materials: {
  215. multiMaterial: false,
  216. materialDescriptions: materialDescriptions,
  217. materialGroups: materialGroups
  218. },
  219. buffers: {
  220. vertices: vertexFA,
  221. colors: colorFA,
  222. normals: normalFA,
  223. uvs: uvFA
  224. }
  225. },
  226. [ vertexFA.buffer ],
  227. colorFA !== null ? [ colorFA.buffer ] : null,
  228. normalFA !== null ? [ normalFA.buffer ] : null,
  229. uvFA !== null ? [ uvFA.buffer ] : null
  230. );
  231. console.log( 'Global output object count: ' + this.globalObjectCount );
  232. };
  233. return Parser;
  234. })();
  235. return MeshSpray;
  236. })();
  237. var MeshSprayApp = (function () {
  238. function MeshSprayApp( elementToBindTo ) {
  239. this.renderer = null;
  240. this.canvas = elementToBindTo;
  241. this.aspectRatio = 1;
  242. this.recalcAspectRatio();
  243. this.scene = null;
  244. this.cameraDefaults = {
  245. posCamera: new THREE.Vector3( 500.0, 500.0, 1000.0 ),
  246. posCameraTarget: new THREE.Vector3( 0, 0, 0 ),
  247. near: 0.1,
  248. far: 10000,
  249. fov: 45
  250. };
  251. this.camera = null;
  252. this.cameraTarget = this.cameraDefaults.posCameraTarget;
  253. this.controls = null;
  254. this.cube = null;
  255. this.pivot = null;
  256. }
  257. MeshSprayApp.prototype.initGL = function () {
  258. this.renderer = new THREE.WebGLRenderer( {
  259. canvas: this.canvas,
  260. antialias: true,
  261. autoClear: true
  262. } );
  263. this.renderer.setClearColor( 0x050505 );
  264. this.scene = new THREE.Scene();
  265. this.camera = new THREE.PerspectiveCamera( this.cameraDefaults.fov, this.aspectRatio, this.cameraDefaults.near, this.cameraDefaults.far );
  266. this.resetCamera();
  267. this.controls = new THREE.TrackballControls( this.camera, this.renderer.domElement );
  268. var ambientLight = new THREE.AmbientLight( 0x404040 );
  269. var directionalLight1 = new THREE.DirectionalLight( 0xC0C090 );
  270. var directionalLight2 = new THREE.DirectionalLight( 0xC0C090 );
  271. directionalLight1.position.set( -100, -50, 100 );
  272. directionalLight2.position.set( 100, 50, -100 );
  273. this.scene.add( directionalLight1 );
  274. this.scene.add( directionalLight2 );
  275. this.scene.add( ambientLight );
  276. var helper = new THREE.GridHelper( 1200, 60, 0xFF4444, 0x404040 );
  277. this.scene.add( helper );
  278. var geometry = new THREE.BoxGeometry( 10, 10, 10 );
  279. var material = new THREE.MeshNormalMaterial();
  280. this.cube = new THREE.Mesh( geometry, material );
  281. this.cube.position.set( 0, 0, 0 );
  282. this.scene.add( this.cube );
  283. this.pivot = new THREE.Object3D();
  284. this.pivot.name = 'Pivot';
  285. this.scene.add( this.pivot );
  286. };
  287. MeshSprayApp.prototype.initContent = function () {
  288. var maxQueueSize = 1024;
  289. var maxWebWorkers = 4;
  290. var radius = 640;
  291. this.workerDirector = new THREE.LoaderSupport.WorkerDirector( MeshSpray );
  292. this.workerDirector.setCrossOrigin( 'anonymous' );
  293. var scope = this;
  294. var callbackOnLoad = function ( sceneGraphBaseNode, modelName, instanceNo ) {
  295. var msg = 'Worker #' + instanceNo + ': Completed loading. (#' + scope.workerDirector.objectsCompleted + ')';
  296. console.log( msg );
  297. };
  298. var reportProgress = function( content, modelName, instanceNo ) {
  299. if ( THREE.LoaderSupport.Validator.isValid( content ) && content.length > 0 ) {
  300. document.getElementById( 'feedback' ).innerHTML = content;
  301. console.log( content );
  302. }
  303. };
  304. var callbackMeshAlter = function ( name, bufferGeometry, material ) {
  305. var override = new THREE.LoaderSupport.LoadedMeshUserOverride( false, true );
  306. var mesh = new THREE.Mesh( bufferGeometry, material );
  307. material.side = THREE.DoubleSide;
  308. mesh.name = name;
  309. override.addMesh( mesh );
  310. return override;
  311. };
  312. var callbacks = new THREE.LoaderSupport.Callbacks();
  313. callbacks.setCallbackOnMeshAlter( callbackMeshAlter );
  314. callbacks.setCallbackOnLoad( callbackOnLoad );
  315. callbacks.setCallbackOnProgress( reportProgress );
  316. this.workerDirector.prepareWorkers( callbacks, maxQueueSize, maxWebWorkers );
  317. var prepData;
  318. var pivot;
  319. var s, t, r, x, y, z;
  320. var globalObjectCount = 0;
  321. for ( var i = 0; i < maxQueueSize; i++ ) {
  322. prepData = new THREE.LoaderSupport.PrepData( 'Triangles_' + i );
  323. pivot = new THREE.Object3D();
  324. s = 2 * Math.PI * Math.random();
  325. t = Math.PI * Math.random();
  326. r = radius * Math.random();
  327. x = r * Math.cos( s ) * Math.sin( t );
  328. y = r * Math.sin( s ) * Math.sin( t );
  329. z = r * Math.cos( t );
  330. pivot.position.set( x, y, z );
  331. this.scene.add( pivot );
  332. prepData.setStreamMeshesTo( pivot );
  333. prepData.quantity = 8192;
  334. prepData.dimension = Math.max( Math.random() * 500, 100 );
  335. prepData.globalObjectCount = globalObjectCount++;
  336. this.workerDirector.enqueueForRun( prepData );
  337. }
  338. this.workerDirector.processQueue();
  339. };
  340. MeshSprayApp.prototype.resizeDisplayGL = function () {
  341. this.controls.handleResize();
  342. this.recalcAspectRatio();
  343. this.renderer.setSize( this.canvas.offsetWidth, this.canvas.offsetHeight, false );
  344. this.updateCamera();
  345. };
  346. MeshSprayApp.prototype.recalcAspectRatio = function () {
  347. this.aspectRatio = ( this.canvas.offsetHeight === 0 ) ? 1 : this.canvas.offsetWidth / this.canvas.offsetHeight;
  348. };
  349. MeshSprayApp.prototype.resetCamera = function () {
  350. this.camera.position.copy( this.cameraDefaults.posCamera );
  351. this.cameraTarget.copy( this.cameraDefaults.posCameraTarget );
  352. this.updateCamera();
  353. };
  354. MeshSprayApp.prototype.updateCamera = function () {
  355. this.camera.aspect = this.aspectRatio;
  356. this.camera.lookAt( this.cameraTarget );
  357. this.camera.updateProjectionMatrix();
  358. };
  359. MeshSprayApp.prototype.render = function () {
  360. if ( ! this.renderer.autoClear ) this.renderer.clear();
  361. this.controls.update();
  362. this.cube.rotation.x += 0.05;
  363. this.cube.rotation.y += 0.05;
  364. this.renderer.render( this.scene, this.camera );
  365. };
  366. return MeshSprayApp;
  367. })();
  368. var app = new MeshSprayApp( document.getElementById( 'example' ) );
  369. // init three.js example application
  370. var resizeWindow = function () {
  371. app.resizeDisplayGL();
  372. };
  373. var render = function () {
  374. requestAnimationFrame( render );
  375. app.render();
  376. };
  377. window.addEventListener( 'resize', resizeWindow, false );
  378. console.log( 'Starting initialisation phase...' );
  379. app.initGL();
  380. app.resizeDisplayGL();
  381. app.initContent();
  382. render();
  383. </script>
  384. </body>
  385. </html>