import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls";
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader';
import * as BufferGeometryUtils from "three/addons/utils/BufferGeometryUtils";
import { RoomEnvironment } from "three/addons/environments/RoomEnvironment";
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer';
import { RenderPass } from 'three/addons/postprocessing/RenderPass';
import { ShaderPass } from "three/addons/postprocessing/ShaderPass";
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass';
import { computeBoundsTree, disposeBoundsTree, acceleratedRaycast } from 'three-mesh-bvh';
import { createNoise3D } from "simplex-noise";
console.clear();
//console.log(CurveModifier);
class Postprocessing {
constructor(scene, camera, renderer) {
const renderScene = new RenderPass(scene, camera);
const bloomPass = new UnrealBloomPass(
new THREE.Vector2(window.innerWidth, window.innerHeight),
2,
0.25,
0
);
let samples = 4;
const target1 = new THREE.WebGLRenderTarget(
window.innerWidth,
window.innerHeight,
{
type: THREE.FloatType,
format: THREE.RGBAFormat,
encoding: THREE.sRGBEncoding,
samples: samples
}
);
this.bloomComposer = new EffectComposer(renderer, target1);
this.bloomComposer.renderToScreen = false;
this.bloomComposer.addPass(renderScene);
this.bloomComposer.addPass(bloomPass);
const finalPass = new ShaderPass(
new THREE.ShaderMaterial({
uniforms: {
baseTexture: { value: null },
bloomTexture: { value: this.bloomComposer.renderTarget2.texture }
},
vertexShader: `varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); }`,
fragmentShader: `uniform sampler2D baseTexture; uniform sampler2D bloomTexture; varying vec2 vUv; void main() { gl_FragColor = ( texture2D( baseTexture, vUv ) + vec4( 1.0 ) * texture2D( bloomTexture, vUv ) ); }`,
defines: {}
}),
"baseTexture"
);
finalPass.needsSwap = true;
const target2 = new THREE.WebGLRenderTarget(
window.innerWidth,
window.innerHeight,
{
type: THREE.FloatType,
format: THREE.RGBAFormat,
encoding: THREE.sRGBEncoding,
samples: samples
}
);
this.finalComposer = new EffectComposer(renderer, target2);
this.finalComposer.addPass(renderScene);
this.finalComposer.addPass(finalPass);
this.finalComposer.setPixelRatio( window.devicePixelRatio )
renderer.setPixelRatio( window.devicePixelRatio )
}
}
class Pattern extends THREE.LineSegments {
constructor(gu) {
let _startPoint = new THREE.Vector3();
let _endPoint = new THREE.Vector3();
let allPts = [];
// <vegetation>
segmentedElement(_startPoint.set(0.1, 0, 0), _endPoint.set(0.9, 0, 0), 10);
segmentedElement(_startPoint.set(0.1, 1, 0), _endPoint.set(0.9, 1, 0), 10);
segmentate(
new THREE.Path().absarc(0.5, 0.5, 0.5, 0, Math.PI).getSpacedPoints(10)
);
let c = new THREE.Vector2(0, 0);
let c1 = new THREE.Vector2(0.25, 0);
let c2 = new THREE.Vector2(0.5, 0);
let v1 = new THREE.Vector2(),
v2 = new THREE.Vector2();
let segs = 10;
for (let i = 0; i <= segs; i++) {
v1.copy(c1).rotateAround(c, (Math.PI / segs) * i);
v2.copy(c2).rotateAround(c, (Math.PI / segs) * i);
segmentate(
new THREE.Path()
.moveTo(0.5, 0)
.quadraticCurveTo(v1.x + 0.5, v1.y + 0.5, v2.x + 0.5, v2.y + 0.5)
.getSpacedPoints(10)
);
}
let g1 = new THREE.BufferGeometry()
.setFromPoints(allPts)
.scale(0.9, 0.75, 1)
.translate(0.0, -1, 0);
setGeometryAttributes(g1, { rotDir: -1 });
// </vegetation>
// <ankh>
allPts = [];
segmentate(
new THREE.Path()
.moveTo(0.4, 0)
.lineTo(0.6, 0)
.lineTo(0.55, 0.45)
.lineTo(0.9, 0.4)
.lineTo(0.9, 0.6)
.lineTo(0.55, 0.55)
.absarc(0.5, 0.8, 0.2, 0, Math.PI)
.lineTo(0.45, 0.55)
.lineTo(0.1, 0.6)
.lineTo(0.1, 0.4)
.lineTo(0.45, 0.45)
.lineTo(0.4, 0)
.getPoints(100)
);
segmentate(
new THREE.Path()
.moveTo(0.5, 0.6)
.lineTo(0.5, 0.6)
.absarc(0.5, 0.8, 0.1, 0, Math.PI)
.lineTo(0.5, 0.6)
.getPoints(50)
);
let g2 = new THREE.BufferGeometry()
.setFromPoints(allPts)
//.translate(0, -1, 0);
setGeometryAttributes(g2, { rotDir: 1 });
// </ankh>
let g = BufferGeometryUtils.mergeBufferGeometries([g1, g2]);
let ig = new THREE.InstancedBufferGeometry().copy(g);
ig.instanceCount = 32;
let m = new THREE.LineBasicMaterial({
color: 0x442208,
onBeforeCompile: (shader) => {
shader.uniforms.time = gu.time;
shader.uniforms.globalBloom = gu.globalBloom;
shader.vertexShader = `
uniform float time;
attribute float rotDir;
mat2 rot(float a){
float c = cos(a);
float s = sin(a);
return mat2(c, -s, s, c);
}
${shader.vertexShader}
`.replace(
`#include <begin_vertex>`,
`#include <begin_vertex>
float t = time * 0.01;
float amount = ${ig.instanceCount}.;
float radiusBase = 4.;
float angleStep = PI2 / amount;
float angle = (angleStep * float(gl_InstanceID)) + angleStep * position.x;
angle = mod(angle + t * PI2 * rotDir, PI2);
transformed.xy = rot(angle) * vec2(0., radiusBase + position.y);
`
);
//console.log(shader.vertexShader);
shader.fragmentShader = `
uniform float globalBloom;
${shader.fragmentShader}
`.replace(
`#include <dithering_fragment>`,
`#include <dithering_fragment>
gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0), globalBloom);
`
);
//console.log(shader.fragmentShader)
}
});
super(ig, m);
function segmentate(pts) {
for (let i = 0; i < pts.length - 1; i++) {
allPts.push(pts[i].clone(), pts[i + 1].clone());
}
}
function segmentedElement(start, end, division = 10) {
for (let i = 0; i < division; i++) {
allPts.push(
new THREE.Vector3().lerpVectors(
start,
end,
THREE.MathUtils.clamp(i / division, 0, 1)
)
);
allPts.push(
new THREE.Vector3().lerpVectors(
start,
end,
THREE.MathUtils.clamp((i + 1) / division, 0, 1)
)
);
}
}
function setGeometryAttributes(geometry, params) {
let rotDir = new Array(geometry.attributes.position.count).fill(
params.rotDir
);
geometry.setAttribute(
"rotDir",
new THREE.Float32BufferAttribute(rotDir, 1)
);
}
}
}
// <CurveModifier>
const CHANNELS = 4;
const TEXTURE_WIDTH = 1024;
const TEXTURE_HEIGHT = 4;
function initSplineTexture( numberOfCurves = 1 ) {
const dataArray = new Float32Array( TEXTURE_WIDTH * TEXTURE_HEIGHT * numberOfCurves * CHANNELS );
const dataTexture = new THREE.DataTexture(
dataArray,
TEXTURE_WIDTH,
TEXTURE_HEIGHT * numberOfCurves,
THREE.RGBAFormat,
THREE.FloatType
);
//dataTexture.magFilter = THREE.NearestFilter;
dataTexture.needsUpdate = true;
return dataTexture;
}
function updateSplineTexture( texture, splineCurve, offset = 0, closed ) {
const numberOfPoints = TEXTURE_WIDTH;
splineCurve.arcLengthDivisions = numberOfPoints / 2;
splineCurve.updateArcLengths();
const points = splineCurve.getSpacedPoints( numberOfPoints );
const frenetFrames = splineCurve.computeFrenetFrames( numberOfPoints, closed );
for ( let i = 0; i < numberOfPoints; i ++ ) {
const rowOffset = Math.floor( i / TEXTURE_WIDTH );
const rowIndex = i % TEXTURE_WIDTH;
let pt = points[ i ];
setTextureValue( texture, rowIndex, pt.x, pt.y, pt.z, 0 + rowOffset + ( 4 * offset ) );
pt = frenetFrames.tangents[ i ];
setTextureValue( texture, rowIndex, pt.x, pt.y, pt.z, 1 + rowOffset + ( 4 * offset ) );
pt = frenetFrames.normals[ i ];
setTextureValue( texture, rowIndex, pt.x, pt.y, pt.z, 2 + rowOffset + ( 4 * offset ) );
pt = frenetFrames.binormals[ i ];
setTextureValue( texture, rowIndex, pt.x, pt.y, pt.z, 3 + rowOffset + ( 4 * offset ) );
}
texture.needsUpdate = true;
}
function setTextureValue( texture, index, x, y, z, o ) {
const image = texture.image;
const { data } = image;
const i = 4 * texture.source.data.width * o; // Row Offset
data[ index * 4 + i + 0 ] = x;
data[ index * 4 + i + 1 ] = y;
data[ index * 4 + i + 2 ] = z;
data[ index * 4 + i + 3 ] = 1;
}
// </CurveModifier>
THREE.BufferGeometry.prototype.computeBoundsTree = computeBoundsTree;
THREE.BufferGeometry.prototype.disposeBoundsTree = disposeBoundsTree;
THREE.Mesh.prototype.raycast = acceleratedRaycast;
let noise3D = createNoise3D();
let gu = {
time: {value: 0},
globalBloom: {value: 0}
}
class Curves{
constructor(model, modelSize, curveAmount, basePointsAmount){
let raycaster = new THREE.Raycaster();
raycaster.firstHitOnly = true;
let ori = new THREE.Vector3(); // origin
let dir = new THREE.Vector3(); // direction
let v3 = new THREE.Vector3();
let found;
let angleStep = Math.PI * 2 / curveAmount;
let heightStep = modelSize.y / basePointsAmount;
model.geometry.computeBoundsTree();
this.curves = [];
for(let i = 0; i < curveAmount; i++){
let pts = [];
v3.setFromCylindricalCoords(1, angleStep * i, 0);
for(let idx = (5 + THREE.MathUtils.randInt(0, 40)); idx < (basePointsAmount - THREE.MathUtils.randInt(0, 40)); idx++){
let angleNoise = noise3D(v3.x, (heightStep * idx) / modelSize.y * 5, v3.z) * Math.PI * 0.1;
let a = angleNoise + angleStep * i;
let h = heightStep * idx;
let r = 100;
ori.setFromCylindricalCoords(r, a, h);
dir.copy(ori).setY(0).normalize().negate();
raycaster.set(ori, dir);
found = raycaster.intersectObject(model);
if (found.length > 0) pts.push(found[0].point.addScaledVector(found[0].face.normal, 0));
}
this.curves.push(new THREE.CatmullRomCurve3(pts));
}
}
}
let bgColors = {
on: new THREE.Color(1, 0.25, 0).multiplyScalar(0.25).getHex(),
off: 0x000000
}
let scene = new THREE.Scene();
scene.background = new THREE.Color(bgColors.off);
let camera = new THREE.PerspectiveCamera(30, innerWidth / innerHeight, 1, 1000);
camera.position.set(-5, 0, 13).setLength(50);
scene.add(camera);
let renderer = new THREE.WebGLRenderer({ antialias: false });
renderer.toneMapping = THREE.ReinhardToneMapping;
renderer.toneMappingExposure = Math.pow( 1.2, 4.0 );
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener("resize", (event) => {
camera.aspect = innerWidth / innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(innerWidth, innerHeight);
postprocessing.bloomComposer.setSize(innerWidth, innerHeight);
postprocessing.finalComposer.setSize(innerWidth, innerHeight);
});
const pmremGenerator = new THREE.PMREMGenerator(renderer);
const bgt = pmremGenerator.fromScene(new RoomEnvironment(), 0.04).texture;
scene.environment = bgt;
//scene.background = bgt;
let controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.enablePan = false;
controls.maxDistance = 200;
let light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.set(0, 1, 2);
scene.add(light, new THREE.AmbientLight(0xffffff, 0.5));
let loader = new GLTFLoader();
let gltf = await loader.loadAsync("https://threejs.org/examples/models/gltf/Nefertiti/Nefertiti.glb");
let model = gltf.scene;
model.traverse(child => {
if(child.isMesh){
child.material.map = null;
child.material.normalMap = null;
child.material.side = THREE.DoubleSide;
}
})
let box = new THREE.Box3().setFromObject(model);
let size = new THREE.Vector3();
box.getSize(size);
camera.position.y = size.y * 0.2;
controls.target.set(0, size.y * 0.465, 0);
controls.update();
//scene.add(model);
let curveAmount = 500;
let basePointsAmount = 300;
let curves = new Curves(model.children[0], size, curveAmount, basePointsAmount);
let dataTexture = initSplineTexture(curveAmount);
console.log(dataTexture);
let instIdx = []; //index
let instDur = []; //duration
let instDel = []; //delay
curves.curves.forEach((curve, cIdx) => {
updateSplineTexture(dataTexture, curve, cIdx, false);
instIdx.push(cIdx);
instDur.push(Math.random() * 2 + 8);
instDel.push(Math.random() + 1);
})
const radialSegs = 5;
/*let g = BufferGeometryUtils.mergeBufferGeometries([
new THREE.CylinderGeometry(1, 1, 1, radialSegs, pointsAmount, true).translate(
0,
0.5,
0
),
new THREE.SphereGeometry(
1,
radialSegs,
radialSegs,
0,
Math.PI * 2,
0,
Math.PI * 0.5
).translate(0, 1, 0),
new THREE.SphereGeometry(
1,
radialSegs,
radialSegs,
0,
Math.PI * 2,
Math.PI * 0.5,
Math.PI * 0.5
)
]);
*/
let g = new THREE.CylinderGeometry(1, 1, 1, radialSegs, basePointsAmount)
.translate(0, 0.5, 0)
.rotateZ(-Math.PI * 0.5)
.setAttribute("instIdx", new THREE.InstancedBufferAttribute(new Float32Array(instIdx), 1))
.setAttribute("instDur", new THREE.InstancedBufferAttribute(new Float32Array(instDur), 1))
.setAttribute("instDel", new THREE.InstancedBufferAttribute(new Float32Array(instDel), 1));
let gi = new THREE.InstancedBufferGeometry().copy(g);
gi.instanceCount = curveAmount;
let m = new THREE.MeshStandardMaterial({
color: 0xdf6222, //0xff3030,
roughness: 0.125,
metalness: 1,
onBeforeCompile: shader => {
shader.uniforms.time = gu.time;
shader.uniforms.globalBloom = gu.globalBloom;
shader.uniforms.dataTexture = {value: dataTexture};
shader.uniforms.radius = m.userData.uniforms.radius;
shader.uniforms.eyeAppearance = m.userData.uniforms.eyeAppearance;
shader.vertexShader = `
uniform float time;
uniform sampler2D dataTexture;
uniform float radius;
attribute float instIdx;
attribute float instDur;
attribute float instDel;
varying vec3 vPos;
float textureLayers = 4. * ${curveAmount}.;
float textureStacks = 1.;
${shader.vertexShader}
`.replace(
`#include <defaultnormal_vertex>`, ``
).replace(
`#include <normal_vertex>`, ``
)
.replace(
`#include <begin_vertex>`,
`#include <begin_vertex>
float elongation = clamp((time - instDel) / instDur, 0., 1.);
float canElongate = elongation > 0. ? 1. : 0.;
float mt = position.x * elongation;
float rowOffset = instIdx * 4.;
vec3 spinePos = texture2D(dataTexture, vec2(mt, (0. + rowOffset + 0.5) / textureLayers)).xyz;
vec3 a = texture2D(dataTexture, vec2(mt, (1. + rowOffset + 0.5) / textureLayers)).xyz;
vec3 b = texture2D(dataTexture, vec2(mt, (2. + rowOffset + 0.5) / textureLayers)).xyz;
vec3 c = texture2D(dataTexture, vec2(mt, (3. + rowOffset + 0.5) / textureLayers)).xyz;
mat3 basis = mat3(a, b, c);
transformed = basis
* (position * radius * canElongate)
+ spinePos;
vec3 transformedNormal = normalMatrix * (basis * objectNormal);
vPos = transformed;
#include <normal_vertex>
`
);
//console.log(shader.vertexShader);
shader.fragmentShader = `
#define S(a, b, c) smoothstep(a, b, c)
uniform float time;
uniform float globalBloom;
uniform float eyeAppearance;
varying vec3 vPos;
${shader.fragmentShader}
`.replace(
`#include <dithering_fragment>`,
`
#include <dithering_fragment>
float appearance = 0.;
appearance = max(appearance, S(eyeAppearance, eyeAppearance + 1., time));
vec2 symmetry = vec2(abs(vPos.x - 0.1425), vPos.y);
vec2 eyePos = vec2(1.39, 18.45);
float eye = distance(symmetry, eyePos);
float f = S(0.6, 0.05, eye) * clamp(sign(vPos.z), 0., 1.) * appearance;
vec3 colShine = vec3(0.125, 0.5, 1); // eyes
vec3 ringCol1 = vec3(1, 0.25, 0.25); // ring color 1
vec3 ringCol2 = vec3(0.25, 0.5, 1); // ring color 2
// planes
vec3 planeDir = normalize(vec3(0, 1, -0.65));
float timeStep = 0.5;
float d =S(0.25, 0., abs(19.5 - dot(vPos, planeDir)));
colShine = mix(colShine, ringCol1, d);
float ring1app = S(eyeAppearance + 2.5 * timeStep, eyeAppearance + 4.5 * timeStep, time);
f = max(f, d * ring1app);
appearance = max(appearance, ring1app);
d =S(0.25, 0., abs(18. - dot(vPos, planeDir)));
colShine = mix(colShine, ringCol2, d);
float ring2app = S(eyeAppearance + 2.25 * timeStep, eyeAppearance + 4.25 * timeStep, time);
f = max(f, d * ring2app);
appearance = max(appearance, ring2app);
d =S(0.25, 0., abs(16. - dot(vPos, planeDir)));
colShine = mix(colShine, ringCol1, d);
float ring3app = S(eyeAppearance + 2.0 * timeStep, eyeAppearance + 4.0 * timeStep, time);
f = max(f, d * ring3app);
appearance = max(appearance, ring3app);
vec3 cntr = vec3(0., 8., 1.);
d = S(0.2, 0., abs(5. - distance(vPos, cntr))) * (vPos.y < 8. ? 1. : 0.);
colShine = mix(colShine, ringCol2, d);
float sphereApp = S(eyeAppearance + 4.0 * timeStep, eyeAppearance + 6.0 * timeStep, time);
f = max(f, d * sphereApp);
appearance = max(appearance, sphereApp);
f *= f * f * f * appearance;
vec3 colBloomNone = mix(gl_FragColor.rgb, colShine, f);
vec3 colBloom = mix(vec3(0), vec3(0.375), f * f * f);
gl_FragColor.rgb = mix(colBloomNone, colBloom, globalBloom);
`
);
//console.log(shader.fragmentShader)
}
});
m.userData.uniforms = {
radius: {value: 0.075},
eyeAppearance: {value: 13}
}
let o = new THREE.Mesh(gi, m);
o.frustumCulled = false;
scene.add(o);
let pattern = new Pattern(gu);
pattern.position.z = -900;
pattern.scale.setScalar(48);
camera.add(pattern);
let postprocessing = new Postprocessing(scene, camera, renderer);
let clock = new THREE.Clock();
renderer.setAnimationLoop(() => {
let t = clock.getElapsedTime();
gu.time.value = t;
controls.update();
//renderer.render(scene, camera);
gu.globalBloom.value = 1;
scene.background.set(bgColors.off);
postprocessing.bloomComposer.render();
gu.globalBloom.value = 0;
scene.background.set(bgColors.on);
postprocessing.finalComposer.render();
});
!
