Когда-то копаясь в проектах WebGL находил Depthy
Исходник на github
Возникло желание попрактиковаться с реализацией такого эффекта, после чего сразу покопался в исходниках, где нашел основной класс для этого. Конечно разбираться в непрокомментированном коде нет охоты (там же и PIXI, о котором я слышу впервые), поэтому решил сразу спросить здесь, может растолкуете сам принцип и этапы, но и я по ходу изучения может смогу добавить информации.
В данный момент "под рукой" есть JS+Canvas, думаю для реализации этого будет достаточно
Пока мысль лишь о том, чтобы каждый пиксель изображения смещать по заданному оффсету(в данном случае это позиция курсора относительно центра) полагаясь на значение того же пикселя на карте глубины. Может тогда возникнут разрывы пикселей и эффект Nearest фильтрации, о чем я не могу пока что лишь предположить, но и это по ходу дела решится?!
Вот что получилось на данный момент чистым JS+Canvas
this.render=function(ctx,offsetX,offsetY) {
for (var i = 0, l = output.width * output.height * 4; i < l; i += 4) {
if(i<0 || i>l)continue;
var depthK = (255-depthData[i/4])/5000;
var offset=i+Math.round((Math.floor(offsetY*depthK)*output.width+Math.floor(offsetX*depthK)))*4;
output.data[i] = mapData[offset];
output.data[i + 1] = mapData[offset+1];
output.data[i + 2] = mapData[offset+2];
}
ctx.putImageData(output,0,0);
};
И это на WebGL. Быстрее и визуально приятнее. Весь код идентичен Hello World'овским, за исключением фрагментного шейдера, куда я передаю две текстуры, одна из которых накладывается на примитивы, а другая служит коэффициентом смещения для каждого пикселя по карте глубины
precision mediump float;
uniform sampler2D map;
uniform sampler2D depth;
uniform vec2 offset;
varying vec2 uv;
void main(void) {
vec2 texCoord = (uv+offset*(1.0-texture2D(depth,uv).z));
gl_FragColor = vec4(texture2D(map,texCoord).xyz, 1.0);
}