webgl_gpgpu_protoplanet.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js webgl - gpgpu - protoplanet</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. <link type="text/css" rel="stylesheet" href="main.css">
  8. <style>
  9. #warning {
  10. color: #ff0000;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <div id="info">
  16. <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - <span id="protoplanets"></span> webgl gpgpu debris
  17. </div>
  18. <!-- Fragment shader for protoplanet's position -->
  19. <script id="computeShaderPosition" type="x-shader/x-fragment">
  20. #define delta ( 1.0 / 60.0 )
  21. void main() {
  22. vec2 uv = gl_FragCoord.xy / resolution.xy;
  23. vec4 tmpPos = texture2D( texturePosition, uv );
  24. vec3 pos = tmpPos.xyz;
  25. vec4 tmpVel = texture2D( textureVelocity, uv );
  26. vec3 vel = tmpVel.xyz;
  27. float mass = tmpVel.w;
  28. if ( mass == 0.0 ) {
  29. vel = vec3( 0.0 );
  30. }
  31. // Dynamics
  32. pos += vel * delta;
  33. gl_FragColor = vec4( pos, 1.0 );
  34. }
  35. </script>
  36. <!-- Fragment shader for protoplanet's velocity -->
  37. <script id="computeShaderVelocity" type="x-shader/x-fragment">
  38. // For PI declaration:
  39. #include <common>
  40. #define delta ( 1.0 / 60.0 )
  41. uniform float gravityConstant;
  42. uniform float density;
  43. const float width = resolution.x;
  44. const float height = resolution.y;
  45. float radiusFromMass( float mass ) {
  46. // Calculate radius of a sphere from mass and density
  47. return pow( ( 3.0 / ( 4.0 * PI ) ) * mass / density, 1.0 / 3.0 );
  48. }
  49. void main() {
  50. vec2 uv = gl_FragCoord.xy / resolution.xy;
  51. float idParticle = uv.y * resolution.x + uv.x;
  52. vec4 tmpPos = texture2D( texturePosition, uv );
  53. vec3 pos = tmpPos.xyz;
  54. vec4 tmpVel = texture2D( textureVelocity, uv );
  55. vec3 vel = tmpVel.xyz;
  56. float mass = tmpVel.w;
  57. if ( mass > 0.0 ) {
  58. float radius = radiusFromMass( mass );
  59. vec3 acceleration = vec3( 0.0 );
  60. // Gravity interaction
  61. for ( float y = 0.0; y < height; y++ ) {
  62. for ( float x = 0.0; x < width; x++ ) {
  63. vec2 secondParticleCoords = vec2( x + 0.5, y + 0.5 ) / resolution.xy;
  64. vec3 pos2 = texture2D( texturePosition, secondParticleCoords ).xyz;
  65. vec4 velTemp2 = texture2D( textureVelocity, secondParticleCoords );
  66. vec3 vel2 = velTemp2.xyz;
  67. float mass2 = velTemp2.w;
  68. float idParticle2 = secondParticleCoords.y * resolution.x + secondParticleCoords.x;
  69. if ( idParticle == idParticle2 ) {
  70. continue;
  71. }
  72. if ( mass2 == 0.0 ) {
  73. continue;
  74. }
  75. vec3 dPos = pos2 - pos;
  76. float distance = length( dPos );
  77. float radius2 = radiusFromMass( mass2 );
  78. if ( distance == 0.0 ) {
  79. continue;
  80. }
  81. // Checks collision
  82. if ( distance < radius + radius2 ) {
  83. if ( idParticle < idParticle2 ) {
  84. // This particle is aggregated by the other
  85. vel = ( vel * mass + vel2 * mass2 ) / ( mass + mass2 );
  86. mass += mass2;
  87. radius = radiusFromMass( mass );
  88. }
  89. else {
  90. // This particle dies
  91. mass = 0.0;
  92. radius = 0.0;
  93. vel = vec3( 0.0 );
  94. break;
  95. }
  96. }
  97. float distanceSq = distance * distance;
  98. float gravityField = gravityConstant * mass2 / distanceSq;
  99. gravityField = min( gravityField, 1000.0 );
  100. acceleration += gravityField * normalize( dPos );
  101. }
  102. if ( mass == 0.0 ) {
  103. break;
  104. }
  105. }
  106. // Dynamics
  107. vel += delta * acceleration;
  108. }
  109. gl_FragColor = vec4( vel, mass );
  110. }
  111. </script>
  112. <!-- Particles vertex shader -->
  113. <script type="x-shader/x-vertex" id="particleVertexShader">
  114. // For PI declaration:
  115. #include <common>
  116. uniform sampler2D texturePosition;
  117. uniform sampler2D textureVelocity;
  118. uniform float cameraConstant;
  119. uniform float density;
  120. varying vec4 vColor;
  121. float radiusFromMass( float mass ) {
  122. // Calculate radius of a sphere from mass and density
  123. return pow( ( 3.0 / ( 4.0 * PI ) ) * mass / density, 1.0 / 3.0 );
  124. }
  125. void main() {
  126. vec4 posTemp = texture2D( texturePosition, uv );
  127. vec3 pos = posTemp.xyz;
  128. vec4 velTemp = texture2D( textureVelocity, uv );
  129. vec3 vel = velTemp.xyz;
  130. float mass = velTemp.w;
  131. vColor = vec4( 1.0, mass / 250.0, 0.0, 1.0 );
  132. vec4 mvPosition = modelViewMatrix * vec4( pos, 1.0 );
  133. // Calculate radius of a sphere from mass and density
  134. //float radius = pow( ( 3.0 / ( 4.0 * PI ) ) * mass / density, 1.0 / 3.0 );
  135. float radius = radiusFromMass( mass );
  136. // Apparent size in pixels
  137. if ( mass == 0.0 ) {
  138. gl_PointSize = 0.0;
  139. }
  140. else {
  141. gl_PointSize = radius * cameraConstant / ( - mvPosition.z );
  142. }
  143. gl_Position = projectionMatrix * mvPosition;
  144. }
  145. </script>
  146. <!-- Particles fragment shader -->
  147. <script type="x-shader/x-fragment" id="particleFragmentShader">
  148. varying vec4 vColor;
  149. void main() {
  150. float f = length( gl_PointCoord - vec2( 0.5, 0.5 ) );
  151. if ( f > 0.5 ) {
  152. discard;
  153. }
  154. gl_FragColor = vColor;
  155. }
  156. </script>
  157. <script type="module">
  158. import * as THREE from '../build/three.module.js';
  159. import Stats from './jsm/libs/stats.module.js';
  160. import { GUI } from './jsm/libs/dat.gui.module.js';
  161. import { OrbitControls } from './jsm/controls/OrbitControls.js';
  162. import { GPUComputationRenderer } from './jsm/misc/GPUComputationRenderer.js';
  163. var isIE = /Trident/i.test( navigator.userAgent );
  164. var isEdge = /Edge/i.test( navigator.userAgent );
  165. // Texture width for simulation (each texel is a debris particle)
  166. var WIDTH = ( isIE || isEdge ) ? 4 : 64;
  167. var container, stats;
  168. var camera, scene, renderer, geometry;
  169. var PARTICLES = WIDTH * WIDTH;
  170. var gpuCompute;
  171. var velocityVariable;
  172. var positionVariable;
  173. var velocityUniforms;
  174. var particleUniforms;
  175. var effectController;
  176. init();
  177. animate();
  178. function init() {
  179. container = document.createElement( 'div' );
  180. document.body.appendChild( container );
  181. camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 5, 15000 );
  182. camera.position.y = 120;
  183. camera.position.z = 400;
  184. scene = new THREE.Scene();
  185. renderer = new THREE.WebGLRenderer();
  186. renderer.setPixelRatio( window.devicePixelRatio );
  187. renderer.setSize( window.innerWidth, window.innerHeight );
  188. container.appendChild( renderer.domElement );
  189. var controls = new OrbitControls( camera, renderer.domElement );
  190. effectController = {
  191. // Can be changed dynamically
  192. gravityConstant: 100.0,
  193. density: 0.45,
  194. // Must restart simulation
  195. radius: 300,
  196. height: 8,
  197. exponent: 0.4,
  198. maxMass: 15.0,
  199. velocity: 70,
  200. velocityExponent: 0.2,
  201. randVelocity: 0.001
  202. };
  203. initComputeRenderer();
  204. stats = new Stats();
  205. container.appendChild( stats.dom );
  206. window.addEventListener( 'resize', onWindowResize, false );
  207. initGUI();
  208. initProtoplanets();
  209. dynamicValuesChanger();
  210. }
  211. function initComputeRenderer() {
  212. gpuCompute = new GPUComputationRenderer( WIDTH, WIDTH, renderer );
  213. var dtPosition = gpuCompute.createTexture();
  214. var dtVelocity = gpuCompute.createTexture();
  215. fillTextures( dtPosition, dtVelocity );
  216. velocityVariable = gpuCompute.addVariable( "textureVelocity", document.getElementById( 'computeShaderVelocity' ).textContent, dtVelocity );
  217. positionVariable = gpuCompute.addVariable( "texturePosition", document.getElementById( 'computeShaderPosition' ).textContent, dtPosition );
  218. gpuCompute.setVariableDependencies( velocityVariable, [ positionVariable, velocityVariable ] );
  219. gpuCompute.setVariableDependencies( positionVariable, [ positionVariable, velocityVariable ] );
  220. velocityUniforms = velocityVariable.material.uniforms;
  221. velocityUniforms[ "gravityConstant" ] = { value: 0.0 };
  222. velocityUniforms[ "density" ] = { value: 0.0 };
  223. var error = gpuCompute.init();
  224. if ( error !== null ) {
  225. console.error( error );
  226. }
  227. }
  228. function restartSimulation() {
  229. var dtPosition = gpuCompute.createTexture();
  230. var dtVelocity = gpuCompute.createTexture();
  231. fillTextures( dtPosition, dtVelocity );
  232. gpuCompute.renderTexture( dtPosition, positionVariable.renderTargets[ 0 ] );
  233. gpuCompute.renderTexture( dtPosition, positionVariable.renderTargets[ 1 ] );
  234. gpuCompute.renderTexture( dtVelocity, velocityVariable.renderTargets[ 0 ] );
  235. gpuCompute.renderTexture( dtVelocity, velocityVariable.renderTargets[ 1 ] );
  236. }
  237. function initProtoplanets() {
  238. geometry = new THREE.BufferGeometry();
  239. var positions = new Float32Array( PARTICLES * 3 );
  240. var p = 0;
  241. for ( var i = 0; i < PARTICLES; i ++ ) {
  242. positions[ p ++ ] = ( Math.random() * 2 - 1 ) * effectController.radius;
  243. positions[ p ++ ] = 0; //( Math.random() * 2 - 1 ) * effectController.radius;
  244. positions[ p ++ ] = ( Math.random() * 2 - 1 ) * effectController.radius;
  245. }
  246. var uvs = new Float32Array( PARTICLES * 2 );
  247. p = 0;
  248. for ( var j = 0; j < WIDTH; j ++ ) {
  249. for ( var i = 0; i < WIDTH; i ++ ) {
  250. uvs[ p ++ ] = i / ( WIDTH - 1 );
  251. uvs[ p ++ ] = j / ( WIDTH - 1 );
  252. }
  253. }
  254. geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
  255. geometry.setAttribute( 'uv', new THREE.BufferAttribute( uvs, 2 ) );
  256. particleUniforms = {
  257. "texturePosition": { value: null },
  258. "textureVelocity": { value: null },
  259. "cameraConstant": { value: getCameraConstant( camera ) },
  260. "density": { value: 0.0 }
  261. };
  262. // THREE.ShaderMaterial
  263. var material = new THREE.ShaderMaterial( {
  264. uniforms: particleUniforms,
  265. vertexShader: document.getElementById( 'particleVertexShader' ).textContent,
  266. fragmentShader: document.getElementById( 'particleFragmentShader' ).textContent
  267. } );
  268. material.extensions.drawBuffers = true;
  269. var particles = new THREE.Points( geometry, material );
  270. particles.matrixAutoUpdate = false;
  271. particles.updateMatrix();
  272. scene.add( particles );
  273. }
  274. function fillTextures( texturePosition, textureVelocity ) {
  275. var posArray = texturePosition.image.data;
  276. var velArray = textureVelocity.image.data;
  277. var radius = effectController.radius;
  278. var height = effectController.height;
  279. var exponent = effectController.exponent;
  280. var maxMass = effectController.maxMass * 1024 / PARTICLES;
  281. var maxVel = effectController.velocity;
  282. var velExponent = effectController.velocityExponent;
  283. var randVel = effectController.randVelocity;
  284. for ( var k = 0, kl = posArray.length; k < kl; k += 4 ) {
  285. // Position
  286. var x, y, z, rr;
  287. do {
  288. x = ( Math.random() * 2 - 1 );
  289. z = ( Math.random() * 2 - 1 );
  290. rr = x * x + z * z;
  291. } while ( rr > 1 );
  292. rr = Math.sqrt( rr );
  293. var rExp = radius * Math.pow( rr, exponent );
  294. // Velocity
  295. var vel = maxVel * Math.pow( rr, velExponent );
  296. var vx = vel * z + ( Math.random() * 2 - 1 ) * randVel;
  297. var vy = ( Math.random() * 2 - 1 ) * randVel * 0.05;
  298. var vz = - vel * x + ( Math.random() * 2 - 1 ) * randVel;
  299. x *= rExp;
  300. z *= rExp;
  301. y = ( Math.random() * 2 - 1 ) * height;
  302. var mass = Math.random() * maxMass + 1;
  303. // Fill in texture values
  304. posArray[ k + 0 ] = x;
  305. posArray[ k + 1 ] = y;
  306. posArray[ k + 2 ] = z;
  307. posArray[ k + 3 ] = 1;
  308. velArray[ k + 0 ] = vx;
  309. velArray[ k + 1 ] = vy;
  310. velArray[ k + 2 ] = vz;
  311. velArray[ k + 3 ] = mass;
  312. }
  313. }
  314. function onWindowResize() {
  315. camera.aspect = window.innerWidth / window.innerHeight;
  316. camera.updateProjectionMatrix();
  317. renderer.setSize( window.innerWidth, window.innerHeight );
  318. particleUniforms[ "cameraConstant" ].value = getCameraConstant( camera );
  319. }
  320. function dynamicValuesChanger() {
  321. velocityUniforms[ "gravityConstant" ].value = effectController.gravityConstant;
  322. velocityUniforms[ "density" ].value = effectController.density;
  323. particleUniforms[ "density" ].value = effectController.density;
  324. }
  325. function initGUI() {
  326. var gui = new GUI( { width: 300 } );
  327. var folder1 = gui.addFolder( 'Dynamic parameters' );
  328. folder1.add( effectController, "gravityConstant", 0.0, 1000.0, 0.05 ).onChange( dynamicValuesChanger );
  329. folder1.add( effectController, "density", 0.0, 10.0, 0.001 ).onChange( dynamicValuesChanger );
  330. var folder2 = gui.addFolder( 'Static parameters' );
  331. folder2.add( effectController, "radius", 10.0, 1000.0, 1.0 );
  332. folder2.add( effectController, "height", 0.0, 50.0, 0.01 );
  333. folder2.add( effectController, "exponent", 0.0, 2.0, 0.001 );
  334. folder2.add( effectController, "maxMass", 1.0, 50.0, 0.1 );
  335. folder2.add( effectController, "velocity", 0.0, 150.0, 0.1 );
  336. folder2.add( effectController, "velocityExponent", 0.0, 1.0, 0.01 );
  337. folder2.add( effectController, "randVelocity", 0.0, 50.0, 0.1 );
  338. var buttonRestart = {
  339. restartSimulation: function () {
  340. restartSimulation();
  341. }
  342. };
  343. folder2.add( buttonRestart, 'restartSimulation' );
  344. folder1.open();
  345. folder2.open();
  346. }
  347. function getCameraConstant( camera ) {
  348. return window.innerHeight / ( Math.tan( THREE.MathUtils.DEG2RAD * 0.5 * camera.fov ) / camera.zoom );
  349. }
  350. function animate() {
  351. requestAnimationFrame( animate );
  352. render();
  353. stats.update();
  354. }
  355. function render() {
  356. gpuCompute.compute();
  357. particleUniforms[ "texturePosition" ].value = gpuCompute.getCurrentRenderTarget( positionVariable ).texture;
  358. particleUniforms[ "textureVelocity" ].value = gpuCompute.getCurrentRenderTarget( velocityVariable ).texture;
  359. renderer.render( scene, camera );
  360. }
  361. </script>
  362. </body>
  363. </html>