WebGL Immersive Storytelling & Brand World

Write a WebGL 2.0 GPU particle system using transform feedback to simulate 500,000 particles entirely on the GPU. Requirements: (1) Two sets of VAOs (ping-pong): positionA/velocityA and positionB/velocityB, each with DYNAMIC_COPY usage. (2) Transform feedback update pass: a vertex shader that reads position and velocity, applies gravity (0, -0.0002, 0), adds curl noise displacement (provide the curl noise GLSL function inline), wraps particles that fall below y=-1 back to y=1 with randomized x/z, and writes new position/velocity to the transform feedback buffer. Fragment shader: gl_FragColor = vec4(0.0) (rasterization disabled with RASTERIZER_DISCARD). (3) Render pass: a separate vertex shader that reads position and outputs gl_PointSize based on distance from camera (range 1.0–4.0), fragment shader with circular point sprite (discard if length(gl_PointCoord - 0.5) > 0.5) and additive blending. (4) Main loop: alternate between A→B and B→A each frame. (5) Include the full WebGL2 context setup, buffer creation, and VAO binding code. TypeScript throughout. Explain the ping-pong pattern in comments.

Write a WebGL 2.0 fullscreen quad fragment shader that renders an animated domain-warped noise field as a generative background. Requirements: (1) Fullscreen quad: two triangles covering clip space [-1,1], rendered with a minimal vertex shader (gl_Position = vec4(position, 0.0, 1.0)). (2) Fragment shader must include: (a) Classic 3D Simplex noise function (provide full GLSL implementation — no texture lookups), (b) FBM (fractal Brownian motion) function: 6 octaves, lacunarity 2.0, gain 0.5, (c) Domain warping: q = vec2(fbm(p), fbm(p + vec2(5.2, 1.3))), r = vec2(fbm(p + 4.0*q + vec2(1.7, 9.2)), fbm(p + 4.0*q + vec2(8.3, 2.8))), final = fbm(p + 4.0*r). (3) Animate with a u_time uniform: add u_time * 0.08 to the input coordinates. (4) Color mapping: map the final noise value through a 3-stop gradient — deep navy (#0A0F1A) at 0.0, electric cyan (#00E5FF) at 0.5, pure white at 1.0 — using mix(). (5) Add a subtle vignette in the fragment shader. Provide the complete vertex shader, fragment shader, and the JavaScript/TypeScript WebGL setup code to compile, link, and run the animation loop.