Tag: webgl

正确的方法来检测WebGL的支持？: 我试图检测跨多个浏览器的WebGL支持，我遇到了以下情况。即使当访问者的video卡被黑名单和/或WebGL被禁用，Firefox的当前版本也会使用以下检查来报告积极的支持： if (window.WebGLRenderingContext) { // This is true in Firefox under certain circumstances, // even when WebGL is disabled… } 我已经试过指导我的用户使用以下步骤启用WebGL。这在某些情况下有效，但并不总是如此。显然，这不是我可以向公众要求的东西：在Firefox的地址栏中键入about：config 要启用WebGL，请将启用webgl.force的设置为true 这导致我创build了自己的方法来检测支持，它使用jQuery注入一个canvas元素来检测支持。这拉扯了我在各种WebGL库和插件中find的许多技术。麻烦的是，testing是非常困难的（关于下面的链接是否适合你的评论是非常感谢！）。为了使这是一个客观的问题，我想知道是否有一个普遍接受的方式来检测所有浏览器的WebGL支持。 testingurl： http://jsfiddle.net/Jn49q/5/

我如何学习WebGL的快速方法？: 我现在正在学习WebGL，但是我发现很难理解这个pipe道。有没有头在线WebGL教程？我应该学习GLSL吗？用WebGL绘制东西的代码太复杂了，有什么办法可以减less代码行吗？

如何停止requestAnimationFramerecursion/循环？: 我正在使用WebGL渲染器的Three.js来制作一个游戏，当点击一个play链接时，它将全屏显示。对于animation，我使用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 。这里是我不试图调用animation方法，并进行全屏播放的版本： http : //banehq.com/Correct/Placeholdername/main.html 。一旦第一次点击游戏，游戏初始化并执行start方法。 […]

SceneJS vs Three.JS vs其他: 赞成和反对任何人？找不到为three.js库设置的完整function。虽然我知道它很受欢迎，也在积极的发展中。也许有人已经在WebGL引擎上做了一些研发，并且可以build议每个库提供哪些好处？

WebGL和ThreeJS中改进的区域照明: 我一直在研究与WebGL相似的区域照明实现： http://threejs.org/examples/webgldeferred_arealights.html three.js中的上述实现已经从gamedev.net上的ArKano22的工作中移出： http://www.gamedev.net/topic/552315-glsl-area-light-implementation/ 虽然这些解决scheme非常令人印象深刻，但它们都有一些限制。 ArKano22最初实现的主要问题是漫射项的计算不考虑曲面法线。我几个星期以来一直在扩充这个解决scheme，通过redPlant的改进来解决这个问题。目前我有正常的计算纳入解决scheme，但结果也有缺陷。这是我目前实现的一个预览：介绍计算每个片段的漫射项的步骤如下：将顶点投影到区域光线所在的平面上，以使投影的vector与光线的法向/方向一致。通过比较投影向量和光的法线，检查顶点是否在区域光平面的正确的一侧。计算平面上该投影点从光源中心/位置的二维偏移量。钳位这个二维偏移vector，使它位于光线区域内（由其宽度和高度定义）。导出投影和钳位的2D点的3D世界位置。这是顶点上的最近点。通过取顶点到最近点向量（归一化）和顶点法线之间的点积来执行通常的漫reflection计算。问题这个解决scheme的问题在于，照明计算是从最近的点完成的，并且不考虑灯表面上的其他点可能更多地照亮片段。让我试着解释为什么… 考虑下图：面光既垂直于表面又与其相交。表面上的每个碎片将始终返回表面和光线相交处的区域光线上的最近点。由于曲面法线和顶点 – 光线vector总是垂直的，它们之间的点积是零。随后，尽pipe在表面上有大面积的光线，漫射贡献的计算是零。潜在的解决scheme 我build议，不要从面积光线上的最近点计算光线，而是从面积光点上计算顶点到光线vector（归一化）和顶点法线之间的最大点积。在上图中，这将是紫色点，而不是蓝色点。帮帮我！所以，这是我需要你的帮助。在我的脑海里，我对这个观点是如何得出的有一个很好的想法，但是没有达到解决的math能力。目前我在片段着色器中有以下信息：顶点位置顶点法线（单位vector）光的位置，宽度和高度光正常（单位vector）轻右（单位vector）点亮（单位vector）投影点从顶点到灯光平面（3D）距离灯光中心的投影点偏移量（2D）夹持偏移（2D）这个夹持偏移的世界位置 – 最近点（3D）为了将所有这些信息放到一个可视的上下文中，我创build了这个图（希望它有帮助）：为了testing我的build议，我需要在由红点表示的区域灯光上的投射点，以便在顶点到投射点（标准化）和顶点法线之间执行点积。再次，这应该产生最大可能的贡献值。 UPDATE！我已经在CodePen上创build了一个交互式的草图，它可视化我目前已经实现的math： […]

是否有任何理由使用WebGL而不是2D游戏/应用程序的2Dcanvas？: 使用WebGL代替2D游戏/应用程序的2D-Canvas是否有其他的原因，除了性能？换句话说，WebGL提供哪些2Dfunction是2D-Canvas无法轻松实现的？

内部映射着色器自我阴影: 我正在修改Joost van Dongen的内部映射着色器，我试图实现自我阴影。我仍然无法弄清楚阴影投射光vector所需要的坐标。您可以在这里看到有些工作演示，我已经将光位置与相机位置的偏移连接起来，以查看发生了什么，但是显然它没有看起来也不错。着色器代码如下。在片段着色器中查找SHADOWS DEV。有问题的vector是： 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 […]

学习WebGL和three.js: 我是新来的，开始在网页浏览器上学习3D计算机graphics。我有兴趣在浏览器中制作3D游戏。对于已经学习WebGL和three.js的人… WebGL的知识是否需要使用three.js？使用three.js和WebGL有什么好处？

Three.js中同一网格物体上的多个透明纹理: 是否可以在Three.js的同一个面上放置多个纹理，以便在GPU中加速GPU？纹理是（或应该）应用到同一个面，以便底部纹理（纹理1）没有alpha通道，上面的纹理是像下面的图像示例中纹理2的方式alpha通道。这种混合可以使用HTML5 Canvas作为预备步骤来实现，但是由于纹理位图可能很大，我倾向于跳过Canvas混合操作。我testing了创build一个网格的副本，并应用每个网格一个纹理，并使其他网格透明，并移动了一点，这几乎成功，但有一些闪烁，因为对象不能完全在相同的位置，有一些纹理之间的空间不是正确的效果。他们应该看起来像他们混合在例如。 Photoshop（如下图）。

使用ShaderMaterial复制MeshLambertMaterial将忽略纹理: 我注意到THREE.js在内部使用着色器来创build核心材质，例如MeshLambertMaterial，所以我决定将Three.js代码中的lambert着色器复制到一个新的着色器中并在其上构build。这是我得到的代码（从Three.js r66忠实复制） THREE.MyShader = { uniforms: THREE.UniformsUtils.merge( [ THREE.UniformsLib[ "common" ], THREE.UniformsLib[ "fog" ], THREE.UniformsLib[ "lights" ], THREE.UniformsLib[ "shadowmap" ], { "ambient" : { type: "c", value: new THREE.Color( 0xffffff ) }, "emissive" : { type: "c", value: new THREE.Color( 0x000000 ) }, "wrapRGB" : { type: "v3", value: new THREE.Vector3( 1, 1, 1 […]