About

This application is a reproduction of goodboy's FV animation.
It was also implemented based on a great video by Akella.

https://nemutas.github.io/goodboy-effect/

References

• goodboy
• #s3e8 ALL YOUR HTML, Recreating goodboydigital.com with three.js

Memo

instancedMeshで、ひとつひとつのmeshの座標（頂点座標ではない）を参照したい場合は、instanceMatrixから取得できる。

goodboy-effect/src/webgl/shaders/tileVert.glsl

Lines 7 to 17 in ec3ec03

	void main() {
	vec3 pos = position;
	float dist = distance(uMouse, instanceMatrix[3].xyz);
	dist = 1.0 - smoothstep(0.0, 0.3, dist);
	float n = cnoise(vec3(instanceMatrix[3].x * 10.0, instanceMatrix[3].y * 10.0, uTime));
	n = smoothstep(-1.0, 1.0, n);
	pos.z += dist * 0.05 * n;
	vDist = dist;
	gl_Position = projectionMatrix * modelViewMatrix * instanceMatrix * vec4( pos, 1.0 );
	}

vec3 meshPos = instanceMatrix[3].xyz;

3次元のアフィン変換行列において、4列目がtranslateに関わる変換なので、[3].xyzでアクセスができる。