小编gma*_*man的帖子
javascript + html5 canvas:在移动设备上绘图而不是拖动/滚动？
我正在使用html5画布+一些javascript(onmousedown/move/up)在网页上创建简单的绘图板.
在Opera,Firefox,Chrome等中运行正常(在台式机上试用).但是如果我用iPhone访问这个页面,当试图在画布上绘图时,它会拖动或滚动页面.
这适用于其他页面内容,通过向下滑动页面,您可以像往常一样在移动浏览器中浏览页面.但有没有办法在画布上禁用此行为,以便移动访问者可以实际上在其上绘制一些东西？
供您参考,这是一个简洁的例子:
<html><head><script type='text/javascript'>
function init()
{
var canvas = document.getElementById('MyCanvas');
var ctx = canvas.getContext('2d');
var x = null;
var y;
canvas.onmousedown = function(e)
{
x = e.pageX - canvas.offsetLeft;
y = e.pageY - canvas.offsetTop;
ctx.beginPath();
ctx.moveTo(x,y);
}
canvas.onmouseup = function(e)
{
x = null;
}
canvas.onmousemove = function(e)
{
if (x==null) return;
x = e.pageX - canvas.offsetLeft;
y = e.pageY - canvas.offsetLeft;
ctx.lineTo(x,y);
ctx.stroke();
}
}
</script></head><body onload='init()'>
<canvas id='MyCanvas' width='500' height='500' style='border:1px solid #777'>
</canvas></body></html>
是否有一些特殊的样式或事件我必须添加到画布中,以避免在画布中滑动时拖动/滚动页面？
推荐指数
解决办法
查看次数
对数深度缓冲区OpenGL
我已经设法在OpenGL中实现了一个对数深度缓冲区,主要是来自Outerra的文章(你可以在这里,这里和这里阅读).但是,我遇到了一些问题,我不确定这些问题是否是使用对数深度缓冲区所固有的,或者是否有一些我无法想到的解决方法.
刚开始,这就是我在顶点着色器中计算对数深度的方法:
gl_Position = MVP * vec4(inPosition, 1.0);
gl_Position.z = log2(max(ZNEAR, 1.0 + gl_Position.w)) * FCOEF - 1.0;
flogz = 1.0 + gl_Position.w;
这就是我在片段着色器中修复深度值的方法:
gl_FragDepth = log2(flogz) * HALF_FCOEF;
在哪里ZNEAR = 0.0001,ZFAR = 1000000.0和FCOEF = 2.0 / log2(ZFAR + 1.0),和HALF_FCOEF = 0.5 * FCOEF. C在我的例子中,是1.0,以简化我的代码并减少计算.
对于初学者来说,我对我获得的精确程度非常满意.使用正常的深度缓冲(znear = 0.1,zfar = 1000.0),我会朝视距的边缘进行相当多的z-fighting.现在,随着我的进一步znear:zfar,我已经将第二个地平面放置在第一个以下0.01个单位,我无法找到任何z-fighting,无论我将相机放大多远(我得到一点z-战斗时只有0.0001(0.1毫米),但是meh).
不过,我确实有一些问题/疑虑.
1)我得到的平面剪裁比我的普通深度缓冲更多,看起来很难看.它发生在逻辑上它确实不应该的情况下.以下是我的意思的几个屏幕截图:
这两种情况都是我用普通深度缓冲区没有遇到的情况,我宁愿看不到(特别是前者).编辑:问题1通过使用正式解决glEnable(GL_DEPTH_CLAMP).
2)为了使其工作,我需要写入gl_FragDepth.我试过不这样做,但结果是不可接受的.写入gl_FragDepth意味着我的显卡无法进行早期z优化.这将不可避免地让我爬上墙,所以我想尽快解决它.
3)我需要能够检索存储在深度缓冲区中的值(我已经有了帧缓冲区和纹理),然后将其转换为线性视图空间坐标.我真的不知道从哪里开始这个,我之前做过它的方式涉及逆投影矩阵,但我不能在这里真正做到这一点.有什么建议？
推荐指数
解决办法
查看次数
Unity3D,如何在正确的线程中处理事件
我正在编写Unity3D脚本并使用网络库.数据准备就绪时,库会发出事件(调用委托).我的库读取该数据并发出尝试访问的事件GameObject但我得到了这些错误
CompareBaseObjectsInternal can only be called from the main thread.
Constructors and field initializers will be executed from the loading thread
when loading a scene. Don't use this function in the constructor or field
initializers, instead move initialization code to the Awake or Start function.
ArgumentException: CompareBaseObjectsInternal can only be called from the main
thread. Constructors and field initializers will be executed from the loading
thread when loading a scene. Don't use this function in the constructor or …推荐指数
解决办法
查看次数
Babylon.js,如何从场景中删除网格？
如何在运行时从Babylon.js中的场景中删除网格？试图搜索,没找到,也试图在调试器中查看场景方法,也找不到.
推荐指数
解决办法
查看次数
在WebGL中从Float32Array转换为Uint16Array
我有Float32Array纹理,可以通过WebGL正确显示.但是,当我尝试将它们转换为Uint16Array时,会出现问题.
这是我的转换部分.
var _floatToHalfFloat = function(input, offset) {
var largestHalf = Math.pow(2, 30-15) * (1 + 1023/1024);
var m = new ArrayBuffer(4);
var n = new Float32Array(m);
var o = new Uint32Array(m);
var f = 0.0;
for (var i = input.length - 1 - offset; i >= 0;i--) {
n[0] = input[i];
f = o[0];
// fast conversion of half
// ref : ftp://www.fox-toolkit.org/pub/fasthalffloatconversion.pdf
if (isNaN(input[i])) {
input[i] = 0x7fff;
} else if(n === Infinity || n > largestHalf) { …推荐指数
解决办法
查看次数
Three.js - 良好的相机 z 距离，可以看到盒子的全貌
我用 Three.js 显示一个大小为 700x700 的场景。在这个场景中，我生成了一个随机位置在 -250 到 250 之间的粒子系统（对于 x,y,z），所以盒子的大小是 500x500。
为了计算相机的正确距离（为了适应盒子的全貌），我试过：
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, controls, scene, renderer;
var cross;
var width = 700, height = 700;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 60, width / height, 1, 1000 );
// tan(pi/6) = 1/sqrt(3) = height/2 / distance_z
camera.position.z = 250*Math.sqrt(3);
...
for(var p = 0; p < particleCount; p++) {
// create a particle with random
// …推荐指数
解决办法
查看次数
THREE.CubeTextureLoader 1px边缘bug
我使用THREE.CubeTextureLoader创建全景立方体:
pano = [
'scenes/4/2048/px.jpg', 'scenes/4/2048/nx.jpg',
'scenes/4/2048/py.jpg', 'scenes/4/2048/ny.jpg',
'scenes/4/2048/pz.jpg', 'scenes/4/2048/nz.jpg',
];
newCubeTexture = cubeTextureLoader.load(pano);
geometry = new THREE.BoxGeometry(20000, 20000, 20000);
material = new THREE.MeshBasicMaterial({
envMap: newCubeTexture,
side: THREE.BackSide,
color: 0xffffff,
transparent: true,
opacity: 0
});
mesh = new THREE.Mesh(geometry, material);
但是当纹理加载时,我看到边缘有1px的bug.
为什么它是heppend？
PS如果我使用地图加载每一面的纹理都很好!
new THREE.MeshBasicMaterial({
map: new THREE.ImageUtils.loadTexture(arr[i]),
side: THREE.BackSide,
transparent: true,
opacity: 0
});
推荐指数
解决办法
查看次数
WebGL:如何正确混合alpha通道png
我是OpenGL的新手,甚至是WebGL的新手.我正在尝试使用alpha通道绘制纹理四边形.但是我无法正确混合.
这是我正在寻找的结果
这就是WebGL结果的样子
正如您所看到的,骰子边缘有一种白色轮廓,原始图像中没有.
这就是我在WebGL中进行混合的方法
gl.clearColor(0.5, 0.5, 0.5, 1);
gl.disable(gl.DEPTH_TEST);
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
这是我的片段着色器:
precision mediump float;
varying vec2 vUV;
uniform sampler2D texture;
void main(void) {
vec4 frag = texture2D(texture, vUV);
gl_FragColor = frag;
}
知道为什么会这样吗？我不会创建mipmap,BTW.
推荐指数
解决办法
查看次数
STL矢量擦除通过指针
我理解(至少我认为我这样做)指针可以用作随机STL迭代器.
除非我将指针强制转换为迭代器,否则为什么以下代码无法编译？
vector<int> v{1, 2, 3};
v.erase(&v[0]);
推荐指数
解决办法
查看次数
Three.js:使用缩放和混合效果过渡2纹理
我试图从一个全景立方体图像平滑过渡到另一个全景立方体图像,以实现房间内的漫游效果.我将这个样本用作Scene,Camera,Mesh SkyBox所有设置的启动器.现在我正在考虑过渡到一个新的全景立方体的最佳方法,这样一个立方体图像可以放大并融入另一个立体图像,就像用户走进房间一样.
我想到了第二个场景和第二个相机,因为旧图像需要放大和淡出,而新图像放大和淡入以实现非常平滑的过渡.我在这里遇到了一些挑战,同时显示了2张图像.旧的一个 - sceneA - 在SceneB出现时不可见,并用以下内容覆盖:
renderer.clear();//multi-scene
if(sceneA && cameraA)
renderer.render( sceneA, cameraA );
renderer.clearDepth();
renderer.render( sceneB, cameraB );
但即使是固定的,如果这是一个正确的方法,我会再考虑一下.我想尝试纹理转换,也许.我无法找到示例或了解如何做到这一点.
如何使用场景或纹理的不同来源从一个可见的立方体图像(纹理)平滑过渡到另一个？
推荐指数
解决办法
查看次数
标签 统计
javascript ×6
three.js ×3
3d ×2
c++ ×2
webgl ×2
babylonjs ×1
c# ×1
depth-buffer ×1
drag ×1
draw ×1
html5-canvas ×1
ieee-754 ×1
iterator ×1
mobile ×1
opengl ×1
panoramas ×1
stl ×1
typed-arrays ×1