rc-1
This commit is contained in:
@@ -0,0 +1,567 @@
|
||||
;(() => {
|
||||
const elemParent = document.querySelector('div.layout-background')
|
||||
const elemSprite = document.querySelector<HTMLLinkElement>('link[rel="texture"]')
|
||||
if (!elemParent || !elemSprite) throw 'Invalid Document'
|
||||
|
||||
const FRAME_INTERVAL = 1000
|
||||
const FRAME_TIME_IDLE = 12
|
||||
const FRAME_TIME_ACTIVE = 60
|
||||
const CAM_ACCEL = 2
|
||||
const CAM_FRICTION = 0.85
|
||||
const PARTICLE_COUNT = 160
|
||||
const COLOR_PARTICLE = 0x484848
|
||||
const COLOR_FOREGROUND = 0x363636
|
||||
const COLOR_BACKGROUND = 0x000000
|
||||
|
||||
let keysHeld = new Set()
|
||||
let frameTime = FRAME_INTERVAL / FRAME_TIME_IDLE
|
||||
let lastTime = 0
|
||||
let lastFrame = 0
|
||||
let time = 0
|
||||
let cameraMVP = mat4()
|
||||
let cameraRotX = 0
|
||||
let cameraRotY = 0
|
||||
let camVelRotX = 0
|
||||
let camVelRotY = 0
|
||||
let spriteTexture: WebGLTexture
|
||||
let spriteModel: Float32Array
|
||||
let particlePos: Float32Array
|
||||
let particleColor: Float32Array
|
||||
let particleData: {
|
||||
x: number
|
||||
y: number
|
||||
z: number
|
||||
vx: number
|
||||
vy: number
|
||||
vz: number
|
||||
life: number
|
||||
maxLife: number
|
||||
}[] = []
|
||||
let planeW: number
|
||||
let planeH: number
|
||||
let planeSegX: number
|
||||
let planeSegY: number
|
||||
let planeVerts: Float32Array
|
||||
let planeOrig: Float32Array
|
||||
let planeIdx
|
||||
|
||||
const canvas = document.createElement('canvas')
|
||||
const gl = canvas.getContext('webgl')
|
||||
if (!gl) throw 'Failed to allocate WebGL Context'
|
||||
|
||||
// --- Camera Controls ---
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (!e.shiftKey && !e.ctrlKey) return
|
||||
if (e.target instanceof HTMLTextAreaElement) return
|
||||
if (e.target instanceof HTMLInputElement) return
|
||||
if ((e as any).isContentEditable) return
|
||||
keysHeld.add(e.key)
|
||||
})
|
||||
document.addEventListener('keyup', (e) => {
|
||||
keysHeld.delete(e.key)
|
||||
})
|
||||
|
||||
// --- Math Functions ---
|
||||
function mat4(): Float32Array {
|
||||
return new Float32Array(16)
|
||||
}
|
||||
function mat4Identity(m: Float32Array): Float32Array {
|
||||
m[0] = 1
|
||||
m[1] = 0
|
||||
m[2] = 0
|
||||
m[3] = 0
|
||||
m[4] = 0
|
||||
m[5] = 1
|
||||
m[6] = 0
|
||||
m[7] = 0
|
||||
m[8] = 0
|
||||
m[9] = 0
|
||||
m[10] = 1
|
||||
m[11] = 0
|
||||
m[12] = 0
|
||||
m[13] = 0
|
||||
m[14] = 0
|
||||
m[15] = 1
|
||||
return m
|
||||
}
|
||||
function mat4Multiply(out: Float32Array, a: Float32Array, b: Float32Array): Float32Array {
|
||||
for (let i = 0; i < 4; i++)
|
||||
for (let j = 0; j < 4; j++) {
|
||||
out[j * 4 + i] = 0
|
||||
for (let k = 0; k < 4; k++) out[j * 4 + i] += a[k * 4 + i] * b[j * 4 + k]
|
||||
}
|
||||
return out
|
||||
}
|
||||
function mat4Perspective(m: Float32Array, fovY: number, aspect: number, near: number, far: number): Float32Array {
|
||||
const f = 1.0 / Math.tan(fovY / 2)
|
||||
m[0] = f / aspect
|
||||
m[1] = 0
|
||||
m[2] = 0
|
||||
m[3] = 0
|
||||
m[4] = 0
|
||||
m[5] = f
|
||||
m[6] = 0
|
||||
m[7] = 0
|
||||
m[8] = 0
|
||||
m[9] = 0
|
||||
m[10] = (far + near) / (near - far)
|
||||
m[11] = -1
|
||||
m[12] = 0
|
||||
m[13] = 0
|
||||
m[14] = (2 * far * near) / (near - far)
|
||||
m[15] = 0
|
||||
return m
|
||||
}
|
||||
function mat4RotateX(m: Float32Array, angle: number): Float32Array {
|
||||
const c = Math.cos(angle)
|
||||
const s = Math.sin(angle)
|
||||
const t = mat4Identity(mat4())
|
||||
t[5] = c
|
||||
t[6] = s
|
||||
t[9] = -s
|
||||
t[10] = c
|
||||
return mat4Multiply(mat4(), t, m)
|
||||
}
|
||||
function mat4RotateY(m: Float32Array, angle: number): Float32Array {
|
||||
const c = Math.cos(angle)
|
||||
const s = Math.sin(angle)
|
||||
const t = mat4Identity(mat4())
|
||||
t[0] = c
|
||||
t[2] = -s
|
||||
t[8] = s
|
||||
t[10] = c
|
||||
return mat4Multiply(mat4(), t, m)
|
||||
}
|
||||
function mat4Translate(m: Float32Array, x: number, y: number, z: number): Float32Array {
|
||||
const t = mat4Identity(mat4())
|
||||
t[12] = x
|
||||
t[13] = y
|
||||
t[14] = z
|
||||
return mat4Multiply(mat4(), t, m)
|
||||
}
|
||||
function randFloat(lo: number, hi: number): number {
|
||||
return lo + Math.random() * (hi - lo)
|
||||
}
|
||||
function randFloatSpread(range: number): number {
|
||||
return randFloat(-range / 2, range / 2)
|
||||
}
|
||||
function degToRad(d: number): number {
|
||||
return (d * Math.PI) / 180
|
||||
}
|
||||
function intToRGB(i: number): [number, number, number] {
|
||||
return [((i >> 16) & 0xff) / 255, ((i >> 8) & 0xff) / 255, ((i >> 0) & 0xff) / 255]
|
||||
}
|
||||
|
||||
// --- Prepare Shaders ---
|
||||
function createShader(type: number, src: string): WebGLShader {
|
||||
if (!gl) throw 'Missing Global GL Context'
|
||||
const s = gl.createShader(type)
|
||||
if (!s) throw 'Shader Compilation Failed'
|
||||
|
||||
gl.shaderSource(s, src)
|
||||
gl.compileShader(s)
|
||||
return s
|
||||
}
|
||||
|
||||
function createProgram(vert: string, frag: string): WebGLProgram {
|
||||
if (!gl) throw 'Missing Global GL Context'
|
||||
const p = gl.createProgram()
|
||||
gl.attachShader(p, createShader(gl.VERTEX_SHADER, vert))
|
||||
gl.attachShader(p, createShader(gl.FRAGMENT_SHADER, frag))
|
||||
gl.linkProgram(p)
|
||||
return p
|
||||
}
|
||||
|
||||
const planeProg = createProgram(
|
||||
`attribute vec3 aPosition;
|
||||
uniform mat4 uMVP;
|
||||
uniform float uTime;
|
||||
varying float vDist;
|
||||
void main() {
|
||||
float dist = sqrt(aPosition.x * aPosition.x + aPosition.z * aPosition.z);
|
||||
float wave = sin(dist * 0.5 - uTime);
|
||||
float cave = -exp(-dist * 0.1) * 3.5;
|
||||
vec3 pos = vec3(aPosition.x, aPosition.y + wave + cave, aPosition.z);
|
||||
vDist = length((uMVP * vec4(pos, 1.0)).xyz);
|
||||
gl_Position = uMVP * vec4(pos, 1.0);
|
||||
}`,
|
||||
`precision mediump float;
|
||||
uniform vec3 uFogColor;
|
||||
uniform float uFogNear;
|
||||
uniform float uFogFar;
|
||||
varying float vDist;
|
||||
void main() {
|
||||
float fog = clamp((vDist - uFogNear) / (uFogFar - uFogNear), 0.0, 1.0);
|
||||
vec3 color = mix(vec3(${intToRGB(COLOR_FOREGROUND).join(',')}), uFogColor, fog);
|
||||
gl_FragColor = vec4(color, 1.0);
|
||||
}`,
|
||||
)
|
||||
|
||||
const particleProg = createProgram(
|
||||
`attribute vec3 aPosition;
|
||||
attribute vec4 aColor;
|
||||
uniform mat4 uMVP;
|
||||
varying vec4 vColor;
|
||||
varying float vDist;
|
||||
void main() {
|
||||
vec4 pos = uMVP * vec4(aPosition, 1.0);
|
||||
vDist = length(pos.xyz);
|
||||
vColor = aColor;
|
||||
gl_PointSize = 3.0;
|
||||
gl_Position = pos;
|
||||
}`,
|
||||
`precision mediump float;
|
||||
uniform vec3 uFogColor;
|
||||
uniform float uFogNear;
|
||||
uniform float uFogFar;
|
||||
varying vec4 vColor;
|
||||
varying float vDist;
|
||||
void main() {
|
||||
float fog = clamp((vDist - uFogNear) / (uFogFar - uFogNear), 0.0, 1.0);
|
||||
float alpha = vColor.a * (1.0 - fog);
|
||||
gl_FragColor = vec4(mix(vColor.rgb, uFogColor, fog), alpha);
|
||||
}`,
|
||||
)
|
||||
|
||||
const spriteProg = createProgram(
|
||||
`attribute vec2 aPosition;
|
||||
attribute vec2 aUV;
|
||||
uniform mat4 uMVP;
|
||||
varying vec2 vUV;
|
||||
void main() {
|
||||
vUV = aUV;
|
||||
gl_Position = uMVP * vec4(aPosition.x , 0, aPosition.y, 1);
|
||||
}`,
|
||||
`precision mediump float;
|
||||
uniform sampler2D uTex;
|
||||
varying vec2 vUV;
|
||||
void main() {
|
||||
gl_FragColor = texture2D(uTex, vUV);
|
||||
}`,
|
||||
)
|
||||
|
||||
const planeBuf = gl.createBuffer()
|
||||
const planeOrigBuf = gl.createBuffer()
|
||||
const planeIdxBuf = gl.createBuffer()
|
||||
const uTimePlane = gl.getUniformLocation(planeProg, 'uTime')
|
||||
const uMVPPlane = gl.getUniformLocation(planeProg, 'uMVP')
|
||||
const uFogColorPlane = gl.getUniformLocation(planeProg, 'uFogColor')
|
||||
const uFogNearPlane = gl.getUniformLocation(planeProg, 'uFogNear')
|
||||
const uFogFarPlane = gl.getUniformLocation(planeProg, 'uFogFar')
|
||||
|
||||
const particlePosBuf = gl.createBuffer()
|
||||
const particleColorBuf = gl.createBuffer()
|
||||
const uMVPParticle = gl.getUniformLocation(particleProg, 'uMVP')
|
||||
const uFogColorParticle = gl.getUniformLocation(particleProg, 'uFogColor')
|
||||
const uFogNearParticle = gl.getUniformLocation(particleProg, 'uFogNear')
|
||||
const uFogFarParticle = gl.getUniformLocation(particleProg, 'uFogFar')
|
||||
|
||||
const spriteImage = new Image()
|
||||
spriteImage.src = elemSprite.href
|
||||
|
||||
const spriteBuf = gl.createBuffer()
|
||||
const spriteIdxBuf = gl.createBuffer()
|
||||
const uMVPSprite = gl.getUniformLocation(spriteProg, 'uMVP')
|
||||
const uTexSprite = gl.getUniformLocation(spriteProg, 'uTex')
|
||||
|
||||
function spawnParticle(i: number) {
|
||||
// Put them in the center because its out of frame anyways save some resources
|
||||
const x = randFloat(-planeW / 2, planeW / 2)
|
||||
const z = randFloat(-planeH / 2, planeH / 2)
|
||||
const l = randFloat(3.0, 6.0)
|
||||
|
||||
particleData[i] = {
|
||||
x,
|
||||
y: 0,
|
||||
z,
|
||||
vx: randFloatSpread(0.05),
|
||||
vy: randFloat(0.02, 0.05),
|
||||
vz: randFloatSpread(0.05),
|
||||
life: l,
|
||||
maxLife: l,
|
||||
}
|
||||
const p = i * 3
|
||||
particlePos[p + 0] = x
|
||||
particlePos[p + 1] = 0
|
||||
particlePos[p + 2] = z
|
||||
|
||||
const c = i * 4
|
||||
const [r, g, b] = intToRGB(COLOR_PARTICLE)
|
||||
particleColor[c + 0] = r
|
||||
particleColor[c + 1] = g
|
||||
particleColor[c + 2] = b
|
||||
particleColor[c + 3] = 0
|
||||
}
|
||||
|
||||
function startup() {
|
||||
if (!gl) throw 'Missing Global GL Context'
|
||||
|
||||
// Render Resolution
|
||||
canvas.width = Math.floor(window.innerWidth * 0.3)
|
||||
canvas.height = Math.floor(window.innerHeight * 0.3)
|
||||
canvas.style.width = window.innerWidth + 'px'
|
||||
canvas.style.height = window.innerHeight + 'px'
|
||||
canvas.style.imageRendering = 'pixelated'
|
||||
|
||||
// Build Sprite
|
||||
spriteImage.onload = () => {
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, spriteBuf)
|
||||
gl.bufferData(
|
||||
gl.ARRAY_BUFFER,
|
||||
new Float32Array([-1, -1, 1, 1, 1, -1, 0, 1, 1, 1, 0, 0, -1, 1, 1, 0]),
|
||||
gl.STATIC_DRAW,
|
||||
)
|
||||
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, spriteIdxBuf)
|
||||
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([0, 1, 2, 0, 2, 3]), gl.STATIC_DRAW)
|
||||
|
||||
spriteModel = mat4Identity(mat4())
|
||||
spriteModel = mat4RotateY(spriteModel, degToRad(180))
|
||||
spriteModel = mat4Translate(spriteModel, 0, 4, 16)
|
||||
|
||||
// Upload Texture
|
||||
spriteTexture = gl.createTexture()
|
||||
gl.bindTexture(gl.TEXTURE_2D, spriteTexture)
|
||||
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, spriteImage)
|
||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
|
||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
|
||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
|
||||
|
||||
gl.useProgram(spriteProg)
|
||||
gl.uniform1i(uTexSprite, 0)
|
||||
gl.activeTexture(gl.TEXTURE0)
|
||||
gl.bindTexture(gl.TEXTURE_2D, spriteTexture)
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, spriteBuf)
|
||||
}
|
||||
|
||||
// Build Plane
|
||||
gl.viewport(0, 0, canvas.width, canvas.height)
|
||||
gl.clearColor(...intToRGB(COLOR_BACKGROUND), 1)
|
||||
gl.enable(gl.BLEND)
|
||||
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)
|
||||
|
||||
const ratio = canvas.width / canvas.height
|
||||
const scale = 24
|
||||
planeSegX = Math.round(12 * ratio)
|
||||
planeSegY = 12
|
||||
planeW = scale * ratio
|
||||
planeH = scale
|
||||
|
||||
const nx = planeSegX + 1
|
||||
const ny = planeSegY + 1
|
||||
planeVerts = new Float32Array(nx * ny * 3)
|
||||
planeOrig = new Float32Array(nx * ny * 3)
|
||||
|
||||
let vi = 0
|
||||
for (let iy = 0; iy < ny; iy++) {
|
||||
for (let ix = 0; ix < nx; ix++) {
|
||||
const x = (ix / planeSegX - 0.5) * planeW
|
||||
const z = (iy / planeSegY - 0.5) * planeH
|
||||
planeVerts[vi] = x
|
||||
planeVerts[vi + 1] = 0
|
||||
planeVerts[vi + 2] = z
|
||||
planeOrig[vi] = x
|
||||
planeOrig[vi + 1] = 0
|
||||
planeOrig[vi + 2] = z
|
||||
vi += 3
|
||||
}
|
||||
}
|
||||
const lines = []
|
||||
for (let iy = 0; iy < ny; iy++) {
|
||||
for (let ix = 0; ix < nx; ix++) {
|
||||
const idx = iy * nx + ix
|
||||
// wireframe indices two triangles per quad
|
||||
if (ix < planeSegX) {
|
||||
lines.push(idx, idx + 1)
|
||||
}
|
||||
if (iy < planeSegY) {
|
||||
lines.push(idx, idx + nx)
|
||||
}
|
||||
if (ix < planeSegX && iy < planeSegY) {
|
||||
lines.push(idx, idx + nx + 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
planeIdx = new Uint16Array(lines)
|
||||
|
||||
// Upload plane buffers
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, planeBuf)
|
||||
gl.bufferData(gl.ARRAY_BUFFER, planeVerts, gl.DYNAMIC_DRAW)
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, planeOrigBuf)
|
||||
gl.bufferData(gl.ARRAY_BUFFER, planeOrig, gl.STATIC_DRAW)
|
||||
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, planeIdxBuf)
|
||||
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, planeIdx, gl.STATIC_DRAW)
|
||||
|
||||
// Initialize particles if first time
|
||||
if (particleData.length === 0) {
|
||||
particlePos = new Float32Array(PARTICLE_COUNT * 3)
|
||||
particleColor = new Float32Array(PARTICLE_COUNT * 4)
|
||||
for (let i = 0; i < PARTICLE_COUNT; i++) {
|
||||
spawnParticle(i)
|
||||
}
|
||||
}
|
||||
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, particlePosBuf)
|
||||
gl.bufferData(gl.ARRAY_BUFFER, particlePos, gl.DYNAMIC_DRAW)
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, particleColorBuf)
|
||||
gl.bufferData(gl.ARRAY_BUFFER, particleColor, gl.DYNAMIC_DRAW)
|
||||
|
||||
// Initialize Fog
|
||||
gl.useProgram(planeProg)
|
||||
gl.uniform3f(uFogColorPlane, ...intToRGB(COLOR_BACKGROUND))
|
||||
gl.uniform1f(uFogNearPlane, 2)
|
||||
gl.uniform1f(uFogFarPlane, 22)
|
||||
|
||||
gl.useProgram(particleProg)
|
||||
gl.uniformMatrix4fv(uMVPParticle, false, cameraMVP)
|
||||
gl.uniform3f(uFogColorParticle, ...intToRGB(COLOR_BACKGROUND))
|
||||
gl.uniform1f(uFogNearParticle, 6)
|
||||
gl.uniform1f(uFogFarParticle, 24)
|
||||
|
||||
// Force dirty camera reset
|
||||
camVelRotY = 0.005
|
||||
}
|
||||
|
||||
function animate(now: number) {
|
||||
requestAnimationFrame(animate)
|
||||
|
||||
// Sleep (warning this sucks)
|
||||
if (now - lastFrame < frameTime) return
|
||||
const delta = (now - lastTime) * 0.00008 || 0
|
||||
lastFrame = now
|
||||
lastTime = now
|
||||
time += delta
|
||||
|
||||
if (!gl) throw 'Missing Global GL Context'
|
||||
gl.clear(gl.COLOR_BUFFER_BIT)
|
||||
|
||||
// Camera Movement
|
||||
if (keysHeld.has('ArrowLeft')) camVelRotY -= CAM_ACCEL
|
||||
if (keysHeld.has('ArrowRight')) camVelRotY += CAM_ACCEL
|
||||
if (keysHeld.has('ArrowUp')) camVelRotX -= CAM_ACCEL
|
||||
if (keysHeld.has('ArrowDown')) camVelRotX += CAM_ACCEL + 8
|
||||
|
||||
camVelRotX *= CAM_FRICTION
|
||||
camVelRotY *= CAM_FRICTION
|
||||
const dirty = Math.abs(camVelRotX) + Math.abs(camVelRotY) > 0.001
|
||||
|
||||
if (dirty) {
|
||||
cameraRotX += camVelRotX * delta * 1000
|
||||
cameraRotY += camVelRotY * delta * 1000
|
||||
|
||||
// Update Camera
|
||||
const ratio = canvas.width / canvas.height
|
||||
const proj = mat4Perspective(mat4(), degToRad(70), ratio, 0.1, 100)
|
||||
|
||||
let view = mat4Identity(mat4())
|
||||
view = mat4Translate(view, 0, -7.5, -15)
|
||||
view = mat4RotateX(view, degToRad(camVelRotX + 33.75))
|
||||
view = mat4RotateY(view, degToRad(camVelRotY))
|
||||
|
||||
cameraMVP = mat4Multiply(mat4(), proj, view)
|
||||
gl.useProgram(planeProg)
|
||||
gl.uniformMatrix4fv(uMVPPlane, false, cameraMVP)
|
||||
gl.useProgram(particleProg)
|
||||
gl.uniformMatrix4fv(uMVPParticle, false, cameraMVP)
|
||||
|
||||
frameTime = FRAME_INTERVAL / FRAME_TIME_ACTIVE
|
||||
} else {
|
||||
frameTime = FRAME_INTERVAL / FRAME_TIME_IDLE
|
||||
}
|
||||
|
||||
// Update Sprite
|
||||
if (spriteTexture) {
|
||||
const spriteMVP = mat4Multiply(mat4(), cameraMVP, spriteModel)
|
||||
gl.useProgram(spriteProg)
|
||||
gl.uniformMatrix4fv(uMVPSprite, false, spriteMVP)
|
||||
gl.uniform1i(uTexSprite, 0)
|
||||
gl.activeTexture(gl.TEXTURE0)
|
||||
gl.bindTexture(gl.TEXTURE_2D, spriteTexture)
|
||||
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, spriteBuf)
|
||||
const aPos = gl.getAttribLocation(spriteProg, 'aPosition')
|
||||
const aUV = gl.getAttribLocation(spriteProg, 'aUV')
|
||||
gl.enableVertexAttribArray(aPos)
|
||||
gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0)
|
||||
gl.enableVertexAttribArray(aUV)
|
||||
gl.vertexAttribPointer(aUV, 2, gl.FLOAT, false, 16, 8)
|
||||
|
||||
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, spriteIdxBuf)
|
||||
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0)
|
||||
}
|
||||
|
||||
{
|
||||
// Update Particles
|
||||
for (let i = 0; i < PARTICLE_COUNT; i++) {
|
||||
const p = particleData[i]
|
||||
|
||||
// fade out
|
||||
p.life -= delta
|
||||
if (p.life <= 0) {
|
||||
spawnParticle(i)
|
||||
continue
|
||||
}
|
||||
particleColor[i * 4 + 3] = Math.min((p.life / p.maxLife) * 1.2, 1)
|
||||
|
||||
// drift away
|
||||
p.x += p.vx * delta * 40
|
||||
p.y += p.vy * delta * 20
|
||||
p.z += p.vz * delta * 40
|
||||
const pi = i * 3
|
||||
particlePos[pi + 0] = p.x
|
||||
particlePos[pi + 1] = p.y
|
||||
particlePos[pi + 2] = p.z
|
||||
}
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, particlePosBuf)
|
||||
gl.bufferSubData(gl.ARRAY_BUFFER, 0, particlePos)
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, particleColorBuf)
|
||||
gl.bufferSubData(gl.ARRAY_BUFFER, 0, particleColor)
|
||||
|
||||
// Draw Particles
|
||||
gl.useProgram(particleProg)
|
||||
const aPos = gl.getAttribLocation(particleProg, 'aPosition')
|
||||
const aCol = gl.getAttribLocation(particleProg, 'aColor')
|
||||
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, particlePosBuf)
|
||||
gl.enableVertexAttribArray(aPos)
|
||||
gl.vertexAttribPointer(aPos, 3, gl.FLOAT, false, 0, 0)
|
||||
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, particleColorBuf)
|
||||
gl.enableVertexAttribArray(aCol)
|
||||
gl.vertexAttribPointer(aCol, 4, gl.FLOAT, false, 0, 0)
|
||||
|
||||
gl.drawArrays(gl.POINTS, 0, PARTICLE_COUNT)
|
||||
}
|
||||
|
||||
{
|
||||
// Update Plane
|
||||
for (let i = 0; i < planeVerts.length; i += 3) {
|
||||
const x = planeOrig[i]
|
||||
const z = planeOrig[i + 2]
|
||||
const dist = Math.sqrt(x * x + z * z)
|
||||
planeVerts[i] = x
|
||||
planeVerts[i + 1] = Math.sin(dist * 0.5 - time) * 0.5 + -Math.exp(-dist * 0.1) * 3.5
|
||||
planeVerts[i + 2] = z
|
||||
}
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, planeBuf)
|
||||
gl.bufferSubData(gl.ARRAY_BUFFER, 0, planeVerts)
|
||||
|
||||
// Draw Plane
|
||||
gl.useProgram(planeProg)
|
||||
gl.uniform1f(uTimePlane, time)
|
||||
|
||||
const aPos = gl.getAttribLocation(planeProg, 'aPosition')
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, planeBuf)
|
||||
gl.enableVertexAttribArray(aPos)
|
||||
gl.vertexAttribPointer(aPos, 3, gl.FLOAT, false, 0, 0)
|
||||
|
||||
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, planeIdxBuf)
|
||||
gl.drawElements(gl.LINES, planeIdx.length, gl.UNSIGNED_SHORT, 0)
|
||||
}
|
||||
}
|
||||
|
||||
// --- Prepare Canvas ---
|
||||
window.addEventListener('resize', startup)
|
||||
startup()
|
||||
animate(0)
|
||||
elemParent.append(canvas)
|
||||
})()
|
||||
Reference in New Issue
Block a user