Блог

Первоначально я пытался создать шейдер skybox для unity, который работает с изображениями рыбьего глаза в качестве входных данных, но не смог заставить его работать, поэтому я начал экспериментировать с JavaScript, потому что я лучше знаком с ним. У меня почти получилось, но в итоге я получил несколько странных артефактов в форме капли в области, которая не должна содержать цвета. это было исходное изображение, а это было изображение результата, на котором показаны артефакты в форме капли.

вот мой код:

 res = 1000;  const c2 = document.createElement("canvas"); c2.height = res; c2.width = res;  const height = 1000; const width = 2000;  const c3 = document.createElement("canvas"); c3.height = height; c3.width = width; document.body.appendChild(c3);  img = new Image(); img.src = "test.png" img.addEventListener("load",function() {   const ctx2 = c2.getContext("2d");  ctx2.drawImage(img, 0, 0, res, res);  const data = ctx2.getImageData(0, 0, res, res).data;   const ctx3 = c3.getContext("2d");   for (let j = 0; j lt;= width; j  ) {  for (let i = 0; i lt;= height; i  ) {  y = -Math.cos(Math.PI * (i / height));  d = Math.sin(Math.PI * (i / height));   z = Math.cos(Math.PI   2 * Math.PI * (j / width)) * d;  x = Math.sin(Math.PI   2 * Math.PI * (j / width)) * d;   const r = coord2fisheye(x,y,z);  r.x = Math.floor(r.x * res);  r.y = Math.floor(r.y * res);   ctx3.fillStyle = `rgb(${data[r.y * res * 4   r.x * 4]},${data[r.y * res * 4   r.x * 4   1]},${data[r.y * res * 4   r.x * 4   2]})`  ctx3.fillRect(j, i, 1, 1);  }  }  })  class Vector {  constructor(x,y,z)  {  this.x = x;  this.y = y;  this.z = z;  }   get normalize()  {  const m = this.magnitude;  return new Vector( this.x / m, this.y / m, this.z / m);  }   get magnitude()  {  return Math.sqrt(this.x * this.x   this.y * this.y   this.z * this.z);  }  }   function coord2fisheye(x,y,z) {  const vector = new Vector(x,y,z);  const normalizedVector = vector.normalize;   const a = Math.atan2(normalizedVector.y,normalizedVector.x);  const b = (180/220) * (2 / Math.PI) * Math.atan2(Math.sqrt(normalizedVector.x ** 2   normalizedVector.y ** 2),normalizedVector.z);   const fy = Math.sin(a) * b;  const fx = Math.cos(a) * b;   return {"x":fx * 0.5   0.5,"y":fy * 0.5   0.5};  }  

ошибка, похоже, где-то в функции coord2fisheye, но я не могу понять, что с ней не так. Я надеюсь, что кто-нибудь сможет помочь мне с моей проблемой.