在孩子中反转父母的旋转，所以孩子在世界中看起来没有旋转
在 THREE.js 场景中，我有一个旋转的父对象.这个父级有子级应该在位置上锁定到他们父级的旋转，但他们自己的旋转需要是独立的，而不是从父级继承. 一个简单的例子是让孩子们总是面对镜头. 我的尝试是“反转"父级在子级中的旋转.即: # 渲染循环渲染 = ->请求动画帧(渲染)# 旋转父级@parent.rotation.x += 0.01@parent.rotation.z +=
..
webgl相关内容
如何在没有 UBO 的情况下进行批处理?
我正在尝试为 WebGL 渲染器实现批处理，该渲染器因绘制调用过多而无法处理大量小对象.我的想法是我会根据他们使用的着色器的类型将它们全部批处理，然后一次绘制一些，上传一次穿着制服的每个对象的材质参数和模型矩阵. 我的问题是非 UBO 制服的统一尺寸限制非常低，因为最少有 256 个浮点数.如果我的材料使用，比如说，8 个浮点数，如果你考虑模型矩阵，我几乎没有足够的制服在一个批次中绘制 10
..
如何从鼠标单击坐标获取 WebGL 3d 空间中的对象
我正在用 WebGL 构建一个棋盘游戏.该板可以旋转/缩放.我需要一种方法将画布元素 (x,y) 上的点击转换为 3D 空间 (x, y, z) 中的相关点.最终的结果是我想知道(x，y，z)坐标，该坐标包含与用户最近的物体接触的点.例如，用户点击一个棋子，你想象一条光线穿过 3D 空间，穿过棋子和游戏板，但我想要棋子的 (x, y, z) 坐标在它所在的点感动. 我觉得这一定是一个非常普遍
..
Canvas/WebGL 2D tilemap 网格工件
我正在创建一个简单的 2D 网页游戏，可以与您的典型瓷砖地图和精灵配合使用. 问题在于我想要平滑的相机控制，包括平移和缩放(缩放). 我尝试同时使用 Canvas 2D API 和 WebGL，在两者中我都无法避免出血的网格线伪影，同时还支持正确缩放. 如果重要的话，我所有的图块的大小都是 1，并缩放到任何需要的大小，它们的所有坐标都是整数，我使用的是纹理图集. 这是使用我
..
索引表达式必须是常量 - WebGL/GLSL 错误
我在使用非常量 int 作为索引访问片段着色器中的数组时遇到问题.我已经删除了公式，因为无论如何它在这里没有多大意义，但我的代码旨在根据当前像素计算 tileID 并使用它来确定颜色. 这是我的代码: int tileID = ;vec3 colorTest;int arrayTest[1024];for (int x = 0; x 显然 GLSL 不喜欢这个，我得到了错误: '
..
没有纹理绑定到单元 0
我目前正面临一个我似乎无法弄清楚的错误. 在 chrome 中我收到: GL 错误:GL_INVALID_VALUE:glTexImage2D:internal_format 无效 GL_FALSE渲染警告:没有绑定到单元 0 的纹理 这导致我的 3D 对象只有黑色纹理，而不是我等待渲染的图像. 解决方案 internal_format 是 gl.texImage2D 的第三个参
..
WebGL:淡入淡出绘图缓冲区
我已将 preserveDrawingBuffer 设置为 true.这样做会立即看到缓冲区上绘制的所有内容，但是，我想知道是否有办法随着时间的推移以某种方式淡化缓冲区，以便绘制的旧元素随着时间的推移消失，而最新绘制的元素以相对较高的不透明度出现，直到它们也消失. 有没有更好的方法来达到这样的效果? 我已经尝试通过降低不透明度直到达到 0 来再次渲染以前的元素，但这似乎不是一种有效的淡
..
是否有可能获得顶点的实际值?
我试图从顶点着色器中恢复一些顶点数据，但我没有在互联网上找到任何相关信息. 我正在使用顶点着色器通过 GPU 计算我的顶点位置，但我需要在 Javascript 中获取应用程序逻辑的结果.有没有可能的方法来做到这一点，而无需在 Javascript 中计算它? 解决方案 在 WebGL2 中，您可以使用转换反馈(如 Pauli 建议)，并且您可以使用 getBufferSubData
..
将鼠标位置转换为对象坐标
我正在尝试使用 Collada 对象将基本的鼠标集成到一个小演示中.我能够获得正确的鼠标 x 和 y，但我不知道如何将它们转换为用于对象的坐标. 我希望 GLGE 函数 duck.setLoc(mousepos.x, mousepos.y) 能够从像素转换，但事实并非如此. 我需要做什么才能将 2D mousepos 像素转换为 3D 点? 解决方案 如果您有屏幕坐标 (x0,
..
阴影贴图出现在错误的地方
我正在尝试使用three.js 中的内置阴影贴图插件.在最初的困难之后，我或多或少地接受了最后一个故障的图像.那个是出现在一些(所有?)表面上的阴影，法线为 0,0,1.下面是同型号的图片. 三个.js Preview.app (Mac) 以及用于设置阴影的代码: var shadowLight = new THREE.DirectionalLight(0xFFFFFF);s
..
WebGL 中有没有办法快速反转模板缓冲区?
我使用的是 WebGL 1.0.我在模板缓冲区中画了一个圆圈，现在我想多次使用这个模板缓冲区而不清除它.我第一次使用它时，我启用了模板测试: gl.enable(GL.STENCIL_TEST); 然后，我将绘图执行到颜色缓冲区.在此之后，在以后的某个日期，我想再次绘制，但这次我想剪辑到模板缓冲区中内容的反.我知道我可以再次绘制到模板缓冲区，但是由于我没有使用 gl.stencilOp(GL.
..
问:为什么当 alpha 为零时，sampler2d 总是返回 vec4(0.0)?
我正在尝试将一些非纹理值传递给纹理中的像素着色器，但遇到了一个奇怪的问题，其中 sampler2d 返回 vec4(0.0) 当纹理的 alpha 值为零时，无论其他 3 个字节的值如何. 这不是预乘 alpha 的东西，也不是混合的东西，当 alpha 的字节值为 1 到 255 时不会发生这种情况，只是零. 如果您运行下面的代码，您将看到小 2d 画布中的 2x2 纹理被渲染到大
..
以毫秒为单位测量 WebGL 纹理负载
如何以毫秒为单位测量 WebGL 纹理负载? 现在我有一组图像，这些图像将使用游戏循环渲染为地图，我对捕获 WebGL 以毫秒为单位加载每个纹理图像所需的时间很感兴趣.我想知道如何衡量这一点，因为 JavaScript 与 WebGL 不同步. 解决方案 在 WebGL 中衡量任何时间的唯一方法是计算出在一定时间内您可以完成多少工作.选择一个目标速度，比如 30fps，使用 requ
..
webgl 绘图顺序，模板缓冲区
我正在阅读 learningwebgl.com，但令我困惑的是它绘制了我作为最后一个元素绑定的第一个缓冲区? http://jsfiddle.net/Cx8gG/1/ 红色三角形绿色广场蓝色方块 我希望只看到蓝色方块，因为其他一切都被透支了，输出似乎是相反的顺序? 我还阅读了有关模板缓冲区的内容，所以我尝试做的是创建一个蒙版(红色)，然后蓝色方块上应该有一个绿色三角形. 面具
..
某些三角形上的 WebGL 阴影/照明太暗
我有一个光照问题，其中一些三角形似乎表现出较差的着色伪影，其中着色在整个多边形(例如墙)的整个表面上不平滑.也就是说，构成多边形的每个三角形的阴影似乎都比相邻的三角形略深或浅. 我正在尝试实现简单的定向照明.这是它的样子: 这里是顶点着色器代码: gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition.xyz, 1.0);v
..
WebGL 中的投影纹理映射
我编写了两个简单的 WebGL 演示，它们使用 512x512 图像作为纹理.但结果不是我想要的.我知道解决方案是使用投影纹理映射(或任何其他解决方案?)但我不知道如何在我的简单演示中实现它.有人可以帮忙吗? 结果如下(两者都不正确): 演示代码在这里:https://github.com/jiazheng/WebGL-Learning/tree/master/texture 注
..
仅显示重叠部分
我想这是基本的东西，但找不到任何解决方案.说，我有 2 个对象，只想显示它们的重叠部分(即它们的交集).有什么提示吗? 解决方案 看看:构造实体几何.这里介绍:http://learningthreejs.com/blog/2011/12/10/constructive-solid-geometry-with-csg-js/
..
webgl 颜色和 alpha
我在 webgl 中遇到颜色和 alpha 问题. 我的 JavaScript 程序的一部分: gl.clearColor(0.0, 0.0, 0.0, 1.0);gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 还有我的片段着色器: precision highp float;无效主(无效){浮动 c = 0.5;浮动 a =
..
绘制元素使用
我在 WebGL 中创建了一个小应用程序，我有两个移动的对象，一个立方体和一个球体.我用着色器修改对象，每个对象都有它的着色器.所以我想在确定的时间更新显示器上的对象，为此我使用 drawElements 函数. 对于每个对象，我都有一个缓冲区，其中包含顶点缓冲区中的面索引: gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
..
创建 WebGL 上下文后，如何设置它的属性?
我知道我们可以在创建上下文时为 WebGL 上下文指定属性: var ctx = myCanvas.getContext('webgl', attributes); 有没有什么方法可以在ctx创建后调用来设置ctx的属性?例如，我们可以做一些类似于 var ctx = myCanvas.getContext(‘webgl’);ctx.setAttributes(属性); 解决方案 这需要
..