使用three.js制作的图片像素排序三维动画

Pixel Sorter，支持用户自己上传图片。

three, color, 图像处理

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 4772
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

const shaderSortFragment = `
	const vec4  kRGBToYPrime = vec4(0.299, 0.587, 0.114, 0.0);
	const vec4  kRGBToI = vec4(0.596, -0.275, -0.321, 0.0);
	const vec4  kRGBToQ = vec4(0.212, -0.523, 0.311, 0.0);
	
	// Based on https://github.com/genekogan/Processing-Shader-Examples/blob/master/TextureShaders/data/hue.glsl
	vec4 getYIQC(vec4 color) {
		float YPrime = dot(color, kRGBToYPrime);
    float I = dot(color, kRGBToI);
    float Q = dot(color, kRGBToQ);

float chroma = sqrt(I * I + Q * Q);

return vec4(YPrime, I, Q, chroma);
	}

// Compare colors by light intensity and color intensity
	bool compareColor(vec4 a, vec4 b) {
		vec4 aYIQC = getYIQC(a);
		vec4 bYIQC = getYIQC(b);

if (aYIQC.x > bYIQC.x) {
			return true;
		}

if (aYIQC.x == bYIQC.x && aYIQC.w > bYIQC.w) {
			return true;
		}

return false;
	}

uniform float uIteration;

void main() {
		vec2 coord = gl_FragCoord.xy;
		bool checkPrevious = mod(coord.x + uIteration, 2.0) < 1.0;
		vec2 pixel = vec2(-1.0, 0.0) / resolution.xy;

vec2 uv = coord / resolution.xy;
		vec4 current = texture2D(uTexture, uv);
		vec4 reference = texture2D(uTexture, checkPrevious ? uv - pixel : uv + pixel);

if (checkPrevious) {
			if (compareColor(reference, current)) {
				gl_FragColor = reference;
				return;
			}
		} else {
			if (compareColor(current, reference)) {
				gl_FragColor = reference;
				return;
			}
		}

gl_FragColor = current;
	}`;

const readFile = (file) => {
	const reader = new FileReader();
	
	return new Promise((resolve, reject) => {
		reader.addEventListener('load', () => resolve(reader.result));
		reader.readAsDataURL(file);
	});
};

const createPlane = () => {
	const fragmentShader = `uniform sampler2D uMap;
		varying vec2 vUv;

void main() {
			gl_FragColor = texture2D(uMap, vUv);
		}`;
	
	const vertexShader = `varying vec2 vUv;
		void main() {
			vUv = uv;
			${THREE.ShaderChunk.begin_vertex}
			${THREE.ShaderChunk.project_vertex}
		}`;
	
	const geometry = new THREE.PlaneGeometry(2, 2, 1, 1);
	const material = new THREE.ShaderMaterial({
		uniforms: {
			uMap: { value: null },
		},
		fragmentShader,
		vertexShader,
	});
	
	return new THREE.Mesh(geometry, material);
};

const input = document.querySelector('.js-input-image');
const outputContainer = document.querySelector('.js-output-container');

const gpuComputeTextureSize = 512;
const plane = createPlane();

const camera = new THREE.Camera();
camera.position.z = 1;

const renderer = new THREE.WebGLRenderer({ antialias: false });
renderer.setSize(gpuComputeTextureSize, gpuComputeTextureSize);

const scene = new THREE.Scene();
scene.add(plane);

let gpuCompute,
		textureSorted,
		variableSorted;

variableSorted = gpuCompute.addVariable('uTexture', shaderSortFragment, textureSorted);
	gpuCompute.setVariableDependencies(variableSorted, [variableSorted]);

const gpuComputeCompileError = gpuCompute.init();
	
	variableSorted.material.uniforms.uIteration = { value: 0 };

if (gpuComputeCompileError !== null) {
		console.error(gpuComputeCompileError);
	}
};

const getImageData = (image, size = 1) => {
	const canvas = document.createElement('canvas');
	canvas.height = size;
	canvas.width = size;
	
	const context = canvas.getContext('2d');
	context.scale(1, -1);
	context.drawImage(image, 0, 0, size, -size);
	
	return context.getImageData(0, 0, size, size).data;
};

const animate = (callback) => {
	const update = () => {
		requestAnimationFrame(update);
		callback();
	};
	
	update();
};

initGpuCompute();
outputContainer.appendChild(renderer.domElement);

input.addEventListener('change', () => {
	const file = input.files[0];
	const image = new Image();
	
	if (!file) return;
	
	readFile(file)
		.then(dataUrl => new Promise((resolve, reject) => {
			image.addEventListener('load', () => resolve())
			image.src = dataUrl;
		}))
		.then(() => {
			const textureData = new Float32Array(getImageData(image, gpuComputeTextureSize))
				.map(value => value / 256);
		
			initGpuCompute(textureData, true);
		});
});

const render = () => {
	gpuCompute.compute();
	
	const texture = gpuCompute.getCurrentRenderTarget(variableSorted).texture;
	plane.material.uniforms.uMap.value = texture;
	variableSorted.material.uniforms.uIteration.value++;
	
	renderer.render(scene, camera);
};

animate(render);

编译

CSS

HTML

Pixel Sorter，支持用户自己上传图片。

three, color, 图像处理

编辑器支持Emmet

快捷键

Pixel Sorter，支持用户自己上传图片。

three, color, 图像处理

使用three.js制作燃烧UI元素的动画特效

使用Three.js实现的图像雾化动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：