Javascript 在画布上模拟3d球体
我有一个关于在HTML5/Canvas/Javascript中伪造3d的问题 基本上,我使用Javascript 在画布上模拟3d球体,javascript,image,canvas,Javascript,Image,Canvas,我有一个关于在HTML5/Canvas/Javascript中伪造3d的问题 基本上,我使用drawImage()在上绘制了一个二维图像。 我想做的是绘制图像,然后置换球体上的纹理以查看。。。球形… 为了清晰起见,请参见下图: 有什么想法吗 我已经在谷歌上搜索到了这一点,而且它不可能是WebGL,因为它必须在手机上工作。。。有什么方法可以做到这一点吗?你完全可以这样做。我不确定它的质量和速度是否足够好,尤其是在手机上 你需要getImageData像素,对它们进行一些我现在想不起来的数学变换,
drawImage()
在
上绘制了一个二维图像。
我想做的是绘制图像,然后置换球体上的纹理以查看。。。球形…
为了清晰起见,请参见下图: 有什么想法吗
我已经在谷歌上搜索到了这一点,而且它不可能是WebGL,因为它必须在手机上工作。。。有什么方法可以做到这一点吗?你完全可以这样做。我不确定它的质量和速度是否足够好,尤其是在手机上 你需要
getImageData
像素,对它们进行一些我现在想不起来的数学变换,然后putImageData
将它们还原
它可能看起来有点模糊或像素化(你可以尝试插值,但这只会让你走这么远)。您可能需要对javascript进行大量优化,以便在移动设备上在合理的时间内完成
转换可能类似于逆方位投影。您可以在此处检查工作原型: 我打赌优化和更好/更快的算法还有很多空间,但我希望这一概念证明将为您指明正确的方向 基本算法遍历原始图像的每个像素,并在其受到球形变形时计算其新位置 结果如下: 代码:
var w=150,h=150;
var canvas=document.getElementById(“myCanvas”);
var ctx=canvas.getContext(“2d”);
ctx.fillStyle=“红色”;
ctx.fillRect(0,0,w,h);
//--初始化画布
var initCanvas=函数()
{
var imgData=ctx.getImageData(0,0,w,h);
对于(i=0;isniff-任何人?:(你想要鱼眼般的效果吗?这里是我的意思的一个快速而肮脏的草稿:。(拖动第二个/第三个滑块以查看我的意思。)这听起来很有趣,你能给我一些引用吗或者更多信息?干杯!就这个:;我记得看到过一个关于投影的好网站,但我再也找不到了。
var w = 150, h = 150;
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(0,0,w,h);
//-- Init Canvas
var initCanvas = function()
{
var imgData=ctx.getImageData(0,0,w,h);
for (i=0; i<imgData.width*imgData.height*4;i+=4)
{
imgData.data[i]=i%150*1.5;
imgData.data[i+1]=i%150*1.5;
imgData.data[i+2]=(i/imgData.width)%150*1.5;
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,0,0);
};
initCanvas();
var doSpherize = function()
{
var refractionIndex = 0.5; // [0..1]
//refraction index of the sphere
var radius = 75;
var radius2 = radius * radius;
var centerX = 75;
var centerY = 75;
//center of the sphere
var origX = 0;
var origY = 0;
for (x=0; x<w;x+=1)
for (y=0; y<h;y+=1)
{
var distX = x - centerX;
var distY = y - centerY;
var r2 = distX * distX + distY * distY;
origX = x;
origY = y;
if ( r2 > 0.0 && r2 < radius2 )
{
// distance
var z2 = radius2 - r2;
var z = Math.sqrt(z2);
// refraction
var xa = Math.asin( distX / Math.sqrt( distX * distX + z2 ) );
var xb = xa - xa * refractionIndex;
var ya = Math.asin( distY / Math.sqrt( distY * distY + z2 ) );
var yb = ya - ya * refractionIndex;
// displacement
origX = origX - z * Math.tan( xb );
origY = origY - z * Math.tan( yb );
}
// read
var imgData=ctx.getImageData(origX,origY,1,1);
// write
ctx.putImageData(imgData,x+w,y+h);
}
};
doSpherize();