evgeniy2002

Please consider using http://lygia.xyz instead of copy/pasting this functions. It expand suport for voronoi, voronoise, fbm, noise, worley, noise, derivatives and much more, through simple file dependencies. Take a look to https://github.com/patriciogonzalezvivo/lygia/tree/main/generative

Generic 1,2,3 Noise

float rand(float n){return fract(sin(n) * 43758.5453123);}

float noise(float p){
	float fl = floor(p);
  float fc = fract(p);

	const useDomToCanvas = (domEl) => {
	const [texture, setTexture] = useState();
	useEffect(() => {
	if (!domEl) return;
	const convertDomToCanvas = async () => {
	const canvas = await html2canvas(domEl, { backgroundColor: null });
	setTexture(new THREE.CanvasTexture(canvas));
	};

	convertDomToCanvas();

	varying vec2 vUv;

	void main() {
	vUv = uv;

	vec4 modelPosition = modelMatrix * vec4(position, 1.0);
	vec4 viewPosition = viewMatrix * modelPosition;
	vec4 projectedPosition = projectionMatrix * viewPosition;

	gl_Position = projectedPosition;

	function PointCircle({ idx, ...rest }) {
	let theta = (idx / 10) * Math.PI * 2;
	let x = Math.sin(theta);
	let y = Math.cos(theta);
	let z = 0;

	return (
	<mesh position={[x, y, z]} {...rest}>
	<sphereGeometry args={[0.1, 32, 32]} />
	<meshNormalMaterial />

	type RefArray<T> = MutableRefObject<(T \| null)[]>;

	function useArrayRef<T>(): [RefArray<T>, (index: number, ref: T \| null) => void] {
	const refs: RefArray<T> = React.useRef([]);

	const setRef = (index: number, ref: T \| null) => {
	if (ref) {
	refs.current[index] = ref;
	} else {
	refs.current[index] = null;

	for (let i = 0; i < count; i++) {
	const theta = Math.random() * 2 * Math.PI;
	const radius = lerp(min_radius, max_radius, Math.random());

	let x = radius * Math.sin(theta);
	let y = (Math.random() - 0.5) * 0.1;
	let z = radius * Math.cos(theta);

	positions.set([x, y, z], i * 3);
	}

	vec3 fbm_vec3(vec3 p, float frequency, float offset) {
	return vec3(snoise((p + vec3(offset)) * frequency), snoise((p + vec3(offset + 20.)) * frequency), snoise((p + vec3(offset - 30.)) * frequency));
	}

	function lerp(a,b,t){
	return a * (1 - t) + b * t

	let r = lerp(min_radius, max_radius, Math.random())