@prisoner849 for some reason, in my implementation, using Threlte, the colors feel much less vibrant- I’m newish to all of this still, so wondering if anything jumps out at you in my implementation. I swapped the noise shader to use this one:
which was linked to in your shader as being faster, and I’ve made some other minor tweaks to the sizes/background transparency etc. to match my specific needs, but even with none of those tweaks it doesn’t look as vibrant.
<script lang="ts">
import { T, useTask } from '@threlte/core';
import * as THREE from 'three';
import { noise } from './shaders';
let gu = $state({
time: {
value: 0
}
});
const geometry = new THREE.PlaneGeometry(10, 10);
const material = new THREE.MeshBasicMaterial();
material.onBeforeCompile = (shader) => {
shader.uniforms.time = gu.time;
shader.fragmentShader = `
uniform float time;
${noise}
float getValue(vec2 uv){
vec2 cID = floor(uv);
vec2 cUV = fract(uv);
vec3 gradient, dg, dg2;
float n = psrddnoise(vec3(cID * 0.05, time * 0.15), vec3(0.0), time * 0.5, gradient, dg, dg2);
n = abs(n);
float r = sqrt(2.) * (1. - n * 0.5);
float fw = length(fwidth(uv));
float fCircle = smoothstep(r, r + fw, length(cUV - 0.5) * 2.);
return fCircle;
}
${shader.fragmentShader}
`.replace(
`vec4 diffuseColor = vec4( diffuse, opacity );`,
`
vec3 col = diffuse;
vec2 uv = (vUv - 0.5) * 50.;
vec2 shift = vec2(0, 1.7);
col.r = getValue(uv - shift);
col.g = getValue(uv);
col.b = getValue(uv + shift);
float alpha = max(max(col.r, col.g), col.b);
vec4 diffuseColor = vec4(col, alpha);
`
);
};
material.defines = { USE_UV: '' };
material.transparent = true;
useTask((delta) => {
gu.time.value += delta;
});
</script>
<T.PerspectiveCamera
position={[0, 0, 12]}
fov={25}
aspect={window.innerWidth / window.innerHeight}
near={0.1}
far={1000}
makeDefault
></T.PerspectiveCamera>
<T.Mesh {geometry} {material} />
Mine just looks much less vibrant.
