Phase 3: AR hunt /hunt + launch page /play - shared-visual ghosts, colour lure, hauntometer
This commit is contained in:
@@ -0,0 +1,188 @@
|
||||
/**
|
||||
* ghost-visual.js — Newbury Nights shared ghost visual (Phase 2)
|
||||
*
|
||||
* Replicates the original's architecture: ONE shared base body, recoloured by a
|
||||
* per-colour gradient (recovered from GhostType_* assets). No per-ghost models.
|
||||
*
|
||||
* Tier 0 (always): procedural wisp mesh + vertical gradient material.
|
||||
* Tier 1 (progressive enhancement): FX billboards (trail / glow / smoke)
|
||||
* layered on top when textures + GPU budget allow.
|
||||
* Special: two roster ghosts can use real meshes (Ghost_Baseball/Bat) via
|
||||
* the `meshLoader` hook.
|
||||
*
|
||||
* Engine-agnostic about your spawn/capture logic — this only produces the
|
||||
* Object3D you place in the scene. Drop into your Three.js r160 app.
|
||||
*
|
||||
* Usage:
|
||||
* import { createGhostVisual, GHOST_GRADIENTS } from './ghost-visual.js';
|
||||
* const g = createGhostVisual(THREE, { color: 'Red', fx: true });
|
||||
* scene.add(g.object3d);
|
||||
* // each frame:
|
||||
* g.update(dt, elapsed);
|
||||
*/
|
||||
|
||||
export const GHOST_GRADIENTS = {
|
||||
Red: { top: '#F65151', bottom: '#FF2678' }, // GhostType_Angry
|
||||
Yellow: { top: '#B57F0B', bottom: '#FFF35D' }, // GhostType_Crazy
|
||||
Blue: { top: '#529EFF', bottom: '#51EAF1' }, // GhostType_Sad
|
||||
};
|
||||
|
||||
const WISP_VERT = `
|
||||
varying float vY;
|
||||
varying vec2 vUv;
|
||||
uniform float uTime;
|
||||
void main() {
|
||||
vUv = uv;
|
||||
vec3 p = position;
|
||||
// gentle billow so the wisp breathes
|
||||
float w = sin(uTime * 1.6 + position.y * 3.0) * 0.04;
|
||||
p.x += w * (0.5 + uv.y);
|
||||
vY = uv.y;
|
||||
gl_Position = projectionMatrix * modelViewMatrix * vec4(p, 1.0);
|
||||
}
|
||||
`;
|
||||
|
||||
const WISP_FRAG = `
|
||||
precision mediump float;
|
||||
varying float vY;
|
||||
varying vec2 vUv;
|
||||
uniform vec3 uTop;
|
||||
uniform vec3 uBottom;
|
||||
uniform float uAlpha;
|
||||
uniform float uTime;
|
||||
void main() {
|
||||
vec3 col = mix(uBottom, uTop, vY); // vertical gradient
|
||||
// soft radial falloff around the body centreline for a wispy edge
|
||||
float edge = smoothstep(0.5, 0.05, abs(vUv.x - 0.5));
|
||||
float fade = edge * (0.65 + 0.35 * sin(uTime * 2.0 + vY * 6.2831));
|
||||
float a = uAlpha * mix(0.45, 1.0, vY) * fade; // thinner at the tail
|
||||
gl_FragColor = vec4(col, a);
|
||||
}
|
||||
`;
|
||||
|
||||
function hexToRGB(THREE, hex) { return new THREE.Color(hex); }
|
||||
|
||||
/**
|
||||
* Build the shared wisp body (a tapered, double-sided plane-ish blob).
|
||||
* Kept cheap: a subdivided cone/teardrop so the gradient + billow read well.
|
||||
*/
|
||||
function buildWispGeometry(THREE) {
|
||||
// teardrop: radius shrinks toward the tail (top in UV space = head)
|
||||
const geo = new THREE.CylinderGeometry(0.0, 0.5, 1.2, 18, 8, true);
|
||||
geo.translate(0, 0.1, 0);
|
||||
return geo;
|
||||
}
|
||||
|
||||
export function createGhostVisual(THREE, opts = {}) {
|
||||
const color = opts.color && GHOST_GRADIENTS[opts.color] ? opts.color : 'Blue';
|
||||
const grad = GHOST_GRADIENTS[color];
|
||||
const wantFx = opts.fx !== false;
|
||||
|
||||
const group = new THREE.Group();
|
||||
group.name = `ghost-${color}`;
|
||||
|
||||
// --- Tier 0: wisp body + gradient material ---
|
||||
const uniforms = {
|
||||
uTime: { value: 0 },
|
||||
uTop: { value: hexToRGB(THREE, grad.top) },
|
||||
uBottom: { value: hexToRGB(THREE, grad.bottom) },
|
||||
uAlpha: { value: 1.0 },
|
||||
};
|
||||
const mat = new THREE.ShaderMaterial({
|
||||
vertexShader: WISP_VERT,
|
||||
fragmentShader: WISP_FRAG,
|
||||
uniforms,
|
||||
transparent: true,
|
||||
depthWrite: false,
|
||||
side: THREE.DoubleSide,
|
||||
blending: THREE.NormalBlending,
|
||||
});
|
||||
const body = new THREE.Mesh(buildWispGeometry(THREE), mat);
|
||||
group.add(body);
|
||||
|
||||
// --- Tier 1: FX billboards (progressive enhancement) ---
|
||||
const fxSprites = [];
|
||||
function addFxBillboard(texture, scale, yOffset, opacity, blend) {
|
||||
const m = new THREE.SpriteMaterial({
|
||||
map: texture,
|
||||
color: new THREE.Color(grad.top),
|
||||
transparent: true,
|
||||
opacity,
|
||||
depthWrite: false,
|
||||
blending: blend ?? THREE.AdditiveBlending,
|
||||
});
|
||||
const s = new THREE.Sprite(m);
|
||||
s.scale.setScalar(scale);
|
||||
s.position.y = yOffset;
|
||||
group.add(s);
|
||||
fxSprites.push(s);
|
||||
return s;
|
||||
}
|
||||
|
||||
// caller passes a loaded-texture map when fx enabled; see attachFx()
|
||||
let fxAttached = false;
|
||||
function attachFx(textures) {
|
||||
if (!wantFx || fxAttached || !textures) return;
|
||||
if (textures.glow) addFxBillboard(textures.glow, 1.6, 0.1, 0.5);
|
||||
if (textures.trail) addFxBillboard(textures.trail, 1.2, -0.4, 0.35);
|
||||
fxAttached = true;
|
||||
}
|
||||
|
||||
// --- optional special mesh override (Ghost_Baseball / Ghost_Bat) ---
|
||||
function useSpecialMesh(mesh) {
|
||||
if (!mesh) return;
|
||||
body.visible = false;
|
||||
mesh.traverse?.(o => {
|
||||
if (o.isMesh && o.material) {
|
||||
o.material.color = new THREE.Color(grad.top);
|
||||
}
|
||||
});
|
||||
group.add(mesh);
|
||||
}
|
||||
|
||||
// --- spawn / capture animation helpers ---
|
||||
let state = 'idle';
|
||||
let stateT = 0;
|
||||
function setState(s) { state = s; stateT = 0; }
|
||||
|
||||
function update(dt, elapsed) {
|
||||
uniforms.uTime.value = elapsed;
|
||||
stateT += dt;
|
||||
// bob
|
||||
group.position.y += Math.sin(elapsed * 1.8) * dt * 0.15;
|
||||
// billboard FX face camera handled by Sprite automatically
|
||||
if (state === 'spawn') {
|
||||
const k = Math.min(stateT / 0.6, 1);
|
||||
group.scale.setScalar(k);
|
||||
uniforms.uAlpha.value = k;
|
||||
if (k >= 1) setState('idle');
|
||||
} else if (state === 'capture') {
|
||||
const k = Math.min(stateT / 0.5, 1);
|
||||
group.scale.setScalar(1 - k);
|
||||
uniforms.uAlpha.value = 1 - k;
|
||||
}
|
||||
}
|
||||
|
||||
// start hidden, play spawn
|
||||
group.scale.setScalar(0);
|
||||
setState('spawn');
|
||||
|
||||
return {
|
||||
object3d: group,
|
||||
color,
|
||||
update,
|
||||
setState, // 'idle' | 'spawn' | 'capture'
|
||||
attachFx, // call with {glow, trail, smoke} THREE.Textures
|
||||
useSpecialMesh, // call with a loaded Ghost_Baseball/Bat mesh
|
||||
setColor(next) {
|
||||
const g2 = GHOST_GRADIENTS[next]; if (!g2) return;
|
||||
uniforms.uTop.value.set(g2.top);
|
||||
uniforms.uBottom.value.set(g2.bottom);
|
||||
fxSprites.forEach(s => s.material.color.set(g2.top));
|
||||
},
|
||||
dispose() {
|
||||
body.geometry?.dispose?.(); mat.dispose?.();
|
||||
fxSprites.forEach(s => s.material?.map?.dispose?.());
|
||||
},
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user