blaster.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js';
  2. export const blaster = (function() {
  3. const _VS = `
  4. varying vec2 v_UV;
  5. varying vec3 vColor;
  6. void main() {
  7. vColor = color;
  8. vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
  9. gl_Position = projectionMatrix * mvPosition;
  10. v_UV = uv;
  11. }
  12. `;
  13. const _PS = `
  14. uniform sampler2D texture;
  15. varying vec2 v_UV;
  16. varying vec3 vColor;
  17. void main() {
  18. gl_FragColor = vec4(vColor, 1.0) * texture2D(texture, v_UV);
  19. }
  20. `;
  21. return {
  22. BlasterSystem: class {
  23. constructor(game, params) {
  24. this._Initialize(game, params);
  25. }
  26. _Initialize(game, params) {
  27. const uniforms = {
  28. texture: {
  29. value: new THREE.TextureLoader().load(params.texture)
  30. }
  31. };
  32. this._material = new THREE.ShaderMaterial( {
  33. uniforms: uniforms,
  34. vertexShader: _VS,
  35. fragmentShader: _PS,
  36. blending: THREE.AdditiveBlending,
  37. depthTest: true,
  38. depthWrite: false,
  39. transparent: true,
  40. vertexColors: true
  41. } );
  42. this._geometry = new THREE.BufferGeometry();
  43. this._particleSystem = new THREE.Mesh(
  44. this._geometry, this._material);
  45. game._graphics._scene.add(this._particleSystem);
  46. this._game = game;
  47. this._liveParticles = [];
  48. }
  49. CreateParticle() {
  50. const p = {
  51. Start: new THREE.Vector3(0, 0, 0),
  52. End: new THREE.Vector3(0, 0, 0),
  53. Colour: new THREE.Color(),
  54. Size: 1,
  55. Alive: true,
  56. };
  57. this._liveParticles.push(p);
  58. return p;
  59. }
  60. Update(timeInSeconds) {
  61. for (const p of this._liveParticles) {
  62. p.Life -= timeInSeconds;
  63. p.End.add(p.Velocity.clone().multiplyScalar(timeInSeconds));
  64. const segment = p.End.clone().sub(p.Start);
  65. if (segment.length() > p.Length) {
  66. const dir = p.Velocity.clone().normalize();
  67. p.Start = p.End.clone().sub(dir.multiplyScalar(p.Length));
  68. }
  69. }
  70. this._liveParticles = this._liveParticles.filter(p => {
  71. return p.Alive;
  72. });
  73. this._GenerateBuffers();
  74. }
  75. _GenerateBuffers() {
  76. const indices = [];
  77. const positions = [];
  78. const colors = [];
  79. const uvs = [];
  80. const square = [0, 1, 2, 2, 3, 0];
  81. let indexBase = 0;
  82. for (const p of this._liveParticles) {
  83. indices.push(...square.map(i => i + indexBase));
  84. indexBase += 4;
  85. const v1 = p.End.clone().applyMatrix4(
  86. this._particleSystem.modelViewMatrix);
  87. const v2 = p.Start.clone().applyMatrix4(
  88. this._particleSystem.modelViewMatrix);
  89. const dir = new THREE.Vector3().subVectors(v1, v2);
  90. dir.z = 0;
  91. dir.normalize();
  92. const up = new THREE.Vector3(-dir.y, dir.x, 0);
  93. const dirWS = up.clone().transformDirection(
  94. this._game._graphics._camera.matrixWorld);
  95. dirWS.multiplyScalar(p.Width);
  96. const p1 = new THREE.Vector3().copy(p.Start);
  97. p1.add(dirWS);
  98. const p2 = new THREE.Vector3().copy(p.Start);
  99. p2.sub(dirWS);
  100. const p3 = new THREE.Vector3().copy(p.End);
  101. p3.sub(dirWS);
  102. const p4 = new THREE.Vector3().copy(p.End);
  103. p4.add(dirWS);
  104. positions.push(p1.x, p1.y, p1.z);
  105. positions.push(p2.x, p2.y, p2.z);
  106. positions.push(p3.x, p3.y, p3.z);
  107. positions.push(p4.x, p4.y, p4.z);
  108. uvs.push(0.0, 0.0);
  109. uvs.push(1.0, 0.0);
  110. uvs.push(1.0, 1.0);
  111. uvs.push(0.0, 1.0);
  112. const c = p.Colours[0].lerp(
  113. p.Colours[1], 1.0 - p.Life / p.TotalLife);
  114. for (let i = 0; i < 4; i++) {
  115. colors.push(c.r, c.g, c.b);
  116. }
  117. }
  118. this._geometry.setAttribute(
  119. 'position', new THREE.Float32BufferAttribute(positions, 3));
  120. this._geometry.setAttribute(
  121. 'uv', new THREE.Float32BufferAttribute(uvs, 2));
  122. this._geometry.setAttribute(
  123. 'color', new THREE.Float32BufferAttribute(colors, 3));
  124. this._geometry.setIndex(
  125. new THREE.BufferAttribute(new Uint32Array(indices), 1));
  126. this._geometry.attributes.position.needsUpdate = true;
  127. this._geometry.attributes.uv.needsUpdate = true;
  128. }
  129. }
  130. };
  131. })();