1
$\begingroup$

This demo:

https://www.khronos.org/registry/webgl/sdk/demos/google/particles/

Contains multiple effects that can be done with WebGL. I've been able to recreate some of them, but for example I don't understand (even after looking at the code) how the flames "swing" ("curl"?) effect is done. Same for the smoke effect.

You can see part of the code here:

https://www.khronos.org/registry/webgl/sdk/demos/google/particles/demo.js

Is the spinSpeedRange variable the one that creates this effect? In which case, how does it work? Looking at the code I reach something like this (for billboarding):

  '  vec2 uv = uvLifeTimeFrameStart.xy;\n' +
  // (... more code)
  '  float s = sin(spinStart + spinSpeed * localTime);\n' +
  '  float c = cos(spinStart + spinSpeed * localTime);\n' +
  '\n' +
  '  vec2 rotatedPoint = vec2(uv.x * c + uv.y * s, \n' +
  '                           -uv.x * s + uv.y * c);\n' +
  '  vec3 localPosition = vec3(basisX * rotatedPoint.x +\n' +
  '                            basisZ * rotatedPoint.y) * size +\n' +
  '                       velocity * localTime +\n' +
  '                       acceleration * localTime * localTime + \n' +
  '                       position;\n' +
  '\n' +
  '  outputPercentLife = percentLife;\n' +
  '  gl_Position = viewProjection * vec4(localPosition + world[3].xyz, 1.);\n' +

But I don't understand exactly how it works. I guess the question would be what should I do to a single particle (e.g. rotate it?) to get as a result a simulation of a flame like the one in the example?

$\endgroup$

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy