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?