标签: webgl

我是新手,开始在网络浏览器中学习3D计算机图形学.我有兴趣在浏览器中制作3D游戏.对于那些同时学习了WebGL和three.js的人来说......

1. 使用three.js需要WebGL的知识吗？

2. 使用three.js与WebGL有什么好处？

除了性能之外,是否有任何理由使用WebGL代替2D-Canvas用于2D游戏/应用程序？

换句话说,WebGL提供的2D功能是不可能用2D-Canvas轻松实现的？

在比较这些不同的类型或者这些东西是如何工作时,我能想到一个类比吗？

另外,统一矩阵意味着什么？

我正在使用带有WebGL渲染器的Three.js来创建一个在play点击链接时全屏显示的游戏.对于动画,我用requestAnimationFrame.

我这样发起:

self.animate = function()
{
    self.camera.lookAt(self.scene.position);

    self.renderer.render(self.scene, self.camera);

    if (self.willAnimate)
        window.requestAnimationFrame(self.animate, self.renderer.domElement);
}

self.startAnimating = function()
{
    self.willAnimate = true;
    self.animate();
}

self.stopAnimating = function()
{
    self.willAnimate = false;
}

当我想,我称之为startAnimating方法,是的,它确实按预期工作.但是,当我调用该stopAnimating函数时,事情就会破裂!没有报告错误,但......

设置基本上是这样的:

• play页面上有一个链接
• 用户点击链接后,渲染器domElement应全屏显示,并且确实如此
• startAnimating调用该方法,渲染器开始渲染内容
• 单击转义后,我会注册一个fullscreenchange事件并执行该stopAnimating方法
• 该页面会尝试退出全屏,但整个文档完全空白

我很确定我的其他代码是好的,而且我以某种方式requestAnimationFrame以错误的方式停止.我的解释可能很糟糕,所以我将代码上传到我的网站,你可以在这里看到它:http://banehq.com/Placeholdername/main.html.

这是我不试图调用动画方法的版本,以及完整的屏幕内外工作:http://banehq.com/Correct/Placeholdername/main.html.

一旦play第一次点击,游戏就会初始化并start执行它的方法.一旦全屏退出,stop就会执行游戏的方法.每隔一次play点击一次,游戏只执行它的start方法,因为不需要再次初始化它.

以下是它的外观:

var playLinkHasBeenClicked …

我正在修补Joost van Dongen的内部映射着色器,我正在尝试实现自我阴影.我仍然无法弄清楚阴影投射光矢量需要的坐标.你可以在这里看到一些有用的演示 我已经附加了光线位置,偏移到相机位置只是为了看看发生了什么,但显然它没有看起来也不错.着色器代码如下.在片段着色器中查找SHADOWS DEV.有问题的向量是:shad_E和shad_I.

顶点着色器:

varying vec3 oP; // surface position in object space
varying vec3 oE; // position of the eye in object space
varying vec3 oI; // incident ray direction in object space

varying vec3 shad_E; // shadow light position
varying vec3 shad_I; // shadow direction

uniform vec3 lightPosition;

void main() {

    // inverse veiw matrix
    mat4 modelViewMatrixInverse = InverseMatrix( modelViewMatrix );

    // surface position in object space
    oP …

我一直在研究WebGL中的区域照明实现,类似于这个演示:

http://threejs.org/examples/webgldeferred_arealights.html

以上在three.js中的实现是从gamedev.net上的ArKano22的工作中移植出来的:

http://www.gamedev.net/topic/552315-glsl-area-light-implementation/

虽然这些解决方案非常令人印象深刻,但它们都有一些局限性.ArKano22最初实现的主要问题是漫反射项的计算不考虑曲面法线.

几个星期以来,我一直在增加这个解决方案,使用redPlant的改进来解决这个问题.目前我将正常的计算结合到解决方案中,但结果也存在缺陷.

以下是我当前实施的预览:

介绍

计算每个片段的扩散项的步骤如下:

1. 将顶点投影到区域光所在的平面上,以使投影向量与光的法线/方向一致.
2. 通过将投影矢量与光线法线进行比较,检查顶点是否位于区域光平面的正确一侧.
3. 从光的中心/位置计算该投影点在平面上的2D偏移.
4. 夹住此2D偏移矢量,使其位于灯光区域内(由其宽度和高度定义).
5. 导出投影和夹紧2D点的3D世界位置.这是区域光到顶点的最近点.
6. 通过获取顶点到最近点矢量(标准化)和顶点法线之间的点积来执行通常的点光计算.

问题

该解决方案的问题在于,照明计算是从最近的点完成的,并且不考虑光表面上可能照亮片段的其他点.让我试着解释一下为什么......

请考虑以下图表:

区域光线垂直于表面并与之相交.表面上的每个碎片将始终返回表面和光相交的区域光上的最近点.由于曲面法线和顶点到光线矢量总是垂直的,因此它们之间的点积为零.随后,尽管在表面上隐藏着大面积的光,但漫射贡献的计算为零.

潜在解决方案

I propose that rather than calculate the light from the nearest point on the area light, we calculate it from a point on the area light that yields the greatest dot product between the vertex-to-light vector (normalised) and the vertex normal. In the diagram above, this would be the purple dot, rather than the …

我正在使用WebGL渲染二进制编码的网格文件.二进制文件以big-endian格式写出(我可以通过在十六进制编辑器中打开文件或使用fiddler查看网络流量来验证这一点).当我尝试使用Float32Array或Int32Array读取二进制响应时,二进制文件被解释为little-endian并且我的值是错误的:

// Interpret first 32bits in buffer as an int
var wrongValue = new Int32Array(binaryArrayBuffer)[0];

我在http://www.khronos.org/registry/typedarray/specs/latest/找不到任何类型数组默认字节序的引用,所以我想知道这笔交易是什么？在使用类型化数组进行读取时,我是否应该假设所有二进制数据都应该是小端？

为了解决这个问题,我可以使用DataView对象(在上一个链接中讨论)并调用:

// Interpret first 32bits in buffer as an int
var correctValue = new DataView(binaryArrayBuffer).getInt32(0);

默认情况下,"getInt32"等DataView函数会读取big-endian值.

(注意:我已经使用Google Chrome 15和Firefox 8进行了测试,它们的行为方式相同)

我正在使用Three.js创建一个3D多人游戏,玩家可以加入各种现有游戏.单击"播放"后,渲染器将附加到页面和全屏幕.这很好用,但问题是,当我退出全屏时,它仍然保持附加状态.我想删除它,但我不知道什么时候!

所以,基本上,我正在寻找一个事件,说"这个元素退出全屏".

这是我将渲染器附加到页面的方式:

container = document.getElementById('container');
document.body.appendChild(container);

var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize( WIDTH, HEIGHT);
container.appendChild( renderer.domElement );

如果我全屏显示它:

THREEx.FullScreen.request(container); 
renderer.setSize(screen.width, screen.height);

此外,有没有办法阻止任何人将鼠标指向页面顶部时出现恼人的标题？而且,我想我可以阻止逃脱它在Firefox和Chrome中的功能(退出全屏)preventDefault？

而且,有谁知道为什么Firefox在3D渲染中比Chrome慢得多？我的意思是,我正在使用WebGL,这意味着正在使用GPU!

编辑:

"fullscreenchange"事件确实被触发了,但它在不同的浏览器下有不同的名称.例如,在Chrome上它被称为"webkitfullscreenchange",在Firefox上它是"mozfullscreenchange".

我有一些顶点数据.位置,法线,纹理坐标.我可能从.obj文件或其他格式加载它.也许我正在画一个立方体.但是每个顶点数据都有自己的索引.我可以使用OpenGL/Direct3D渲染这个网格数据吗？

我不完全清楚启用顶点属性数组的范围.我有几个不同的着色器程序,它们具有不同数量的顶点属性.是glEnableVertexAttribArray对着色器程序本地调用还是全局调用？

现在我在创建着色器程序时启用顶点属性数组,并且从不禁用它们,并且一切似乎都有效,但似乎我可能应该在绘制调用之前/之后启用/禁用它们.对此有影响吗？

(我正在使用WebGL,所以我们真的在谈论gl.enableVertexAttribArray和gl.disableVertexAttribArray.我还会注意到橙皮书,OpenGL着色语言,对这些调用没有任何信息.)