webgl相关内容

在鼠标移动上创建涂抹/液化效果，使用 webgl 连续动画回原始状态

我正在尝试查找可用于创建持续动画回到原始状态的涂抹/液化效果的信息或示例. 最初我正在考虑使用 three.js 或 pixi.js 来渲染一些文本，然后使用鼠标事件和光线投射将网格拖出位置，我发现最接近的是这个. https://codepen.io/shshaw/pen/qqVgbg 让渲染器 = PIXI.autoDetectRenderer(window.innerWidth ..

发布时间：2022-01-17 11:34:52 javascript animation html5-canvas glsl webgl 前端开发

使用 WebGL 绘制图像

请任何人解释如何在 WebGL 画布上绘制图像?目前，在常规的“2d"画布上，我正在使用这个: var canvas = document.getElementById("canvas");var cxt = canvas.getContext('2d');img.onload = 函数() {cxt.drawImage(img, 0, 0, canvas.width, canvas.heigh ..

发布时间：2022-01-17 11:26:54 html5-canvas webgl 其他开发

通过 canvas.toDataURL 将画布保存到图像会导致黑色矩形

我正在使用 Pixi.js 并尝试将动画帧保存到图像中.canvas.toDataUrl 应该可以工作，但我得到的只是一个黑色矩形.查看现场示例这里 我用来提取图像数据并设置图像的代码是: var canvas = $('canvas')[0];var context = canvas.getContext('2d');$('button').click(function() {var ..

发布时间：2022-01-17 11:16:58 javascript canvas html5-canvas webgl pixi.js 前端开发

THREE.js:计算对象上一点的世界空间位置

我有一个 3D 对象.“附着"它是一个点.当物体移动或旋转时，点也随之移动和旋转. 给定物体的位置和旋转，如何计算点在世界空间中的位置?(如果可能，使用 THREE.js 的 API) 谢谢 解决方案 对于对象局部坐标系中的一个点， object.localToWorld(point); 将返回该点的世界坐标，假设应用于点的变换与应用于对象的变换相同. three.j ..

发布时间：2022-01-14 15:30:36 rotation geometry translation three.js webgl 其他开发

Three.js/WebGL:大球体在交叉路口出现破损

让我先说我对 3D 图形非常缺乏经验. 问题 我正在使用 Three.js.我有两个球体(故意)在我的 WebGL 模型中发生碰撞.当我的球体非常大时，重叠的球体在它们相交的地方出现“破碎"，但较小的球体呈现完美. 我有一个非常具体的原因为某些对象使用如此大的单位，而缩小对象并不是一个真正的选择. 示例 这里是一个大领域的小提琴:http://jsfiddle.net ..

发布时间：2022-01-14 15:09:10 javascript three.js geometry webgl 前端开发

html2canvas 捕获除内部画布内容之外的所有内容

我有一张通过leaflet 渲染的地图. 我需要使用 html2canvas 对该地图进行截图. 要使用html2canvas，我需要提供一个要捕获的DOM 元素(elementToCapture)和一个可选配置(​​html2canvasConfiguration). var html2canvasConfiguration = {使用CORS:真，宽度:map._size.x，高 ..

发布时间：2022-01-12 18:12:16 javascript leaflet webgl html2canvas 前端开发

旋转相机时重复的纹理严重扭曲/抖动

我最初在 gamedev 上问过这个问题，但没有一个答案有助于解决问题，我仍然不知道真正的原因是什么.我没有看到任何关于在常见问题解答中跨 SE 重新发布问题的信息，所以我只能希望这没问题.此外，回想起来，这个问题可能更多地与一般的图形编程有关，而不仅仅是游戏开发. 编辑 1 开始 原帖的行为仅适用于 Windows XP 和 Windows 7、浏览器 Firefox 和 Chrom ..

发布时间：2022-01-09 09:47:34 javascript opengl-es rotation textures webgl 前端开发

一个片段可以访问 WebGL GLSL 中的所有纹理像素值吗?(不仅仅是它自己的 TexCoord)

假设我正在使用 WebGL 和 GLSL 制作计算着色器. 在这个着色器中，每个片段(或像素)都想查看纹理上的每个像素，然后决定它自己的颜色. 通常一个片段从几个纹理中采样它提供的纹理坐标(UV 值)，但我想有效地从单个纹理中为单个片段采样所有 UV 值. 这可能吗? 解决方案 编辑:我能够从 128x128 纹理中的每个像素进行采样，但移动到 256x256 会导致 C ..

发布时间：2022-01-09 09:45:55 opengl-es glsl webgl fragment-shader compute-shader 其他开发

是否可以使用 gl.finish() 在 webgl 中测量渲染时间?

我正在尝试测量加载 webgl 中的图像所需的时间. 我正在考虑使用 gl.finish() 来获取图像加载前后的时间戳，然后将两者相减以获得准确的测量结果，但是我找不到这种用法的好例子. 这种事情可能吗，如果可以，有人可以提供示例代码吗? 解决方案 不是的. 其实在 Chrome 中 gl.finish 只是一个 gl.flush.查看代码并搜索“::结束". 因 ..

发布时间：2022-01-09 09:39:59 javascript opengl-es webgl 前端开发

三.js作为网站背景可以吗?

我一直在考虑使用 three.js 在网站上进行有趣的实验.我想使用一个当前的实验(我已经有了它的代码)并将它用作我网站的背景. 有人知道怎么做吗? 我在这里看到了它:http://janjorissen.be/ 三个 JS API:https://github.com/mrdoob/three.js/wiki/API-参考 解决方案 通常我使用 iframe.因此，您不 ..

发布时间：2022-01-09 09:36:24 javascript opengl-es background three.js webgl 前端开发

如何检测webgl中的碰撞?

如何在 webgl 中检测碰撞，而不使用像 three.js 这样的任何库? 解决方案 如何在 webgl 中检测碰撞 你没有.WebGL 和 OpenGL 一样，仅用于绘图.它不管理场景，没有“对象"的概念或碰撞之类的高级事物.都是关于点、线、三角形和着色器的. 与场景管理或碰撞相关的任何事情都超出了 WebGL(和 OpenGL)的范围. ..

发布时间：2022-01-09 09:35:54 javascript opengl-es collision-detection webgl 前端开发

用户在 three.js 中上传的纹理

这里你会找到一个 jsFiddle 改编的问题. 我想创建一个 3d 网络应用程序，用户可以在其中选择本地计算机上的图像文件: 选择文件时，图像会作为参数加载到 THREE.ShaderMaterial 对象中.将 glsl 着色器应用于图像，并将结果渲染到浏览器中的容器: $("#userImage").chan ..

发布时间：2022-01-09 09:35:48 javascript opengl-es three.js webgl cors 前端开发

如何在 WebGL 中使用多个纹理?

我想在一个立方体上使用 6 种不同的纹理，每边一个，但找不到错误.这是我当前的代码: var texturen = new Array();函数 initTexture(sFilename,texturen){var anz = texturen.length;纹理[anz] = gl.createTexture();texturen[anz].image = new Image();纹理[a ..

发布时间：2022-01-09 09:35:07 javascript opengl-es textures webgl 前端开发

如何在 OpenGL (ES) 中正确渲染重合多边形

我知道通过在 OpenGL ES 中设置深度函数，可以控制重叠几何图形在 3D 场景中的渲染方式.我在我的代码中使用 gl.depthFunc(gl.LEQUAL) (webgl). 但是，当两组多边形重合且颜色不同时，生成的表面会变成两种颜色的任意混合图案(随着相机位置的变化而变化，因此会导致闪烁).看看这张图片: 我该如何解决这个问题?我尝试了不同的 depthFunc 值，但没有 ..

发布时间：2022-01-09 09:34:26 opengl-es webgl depth-buffer 其他开发

在 3D 世界中渲染 2D 精灵?

如果我有精灵的 png，我如何在 OpenGL 中渲染 2D 精灵?将图像作为我想要实现的效果的示例.我也想在屏幕上叠加武器，比如底部图像中的步枪.有谁知道我将如何实现这两种效果?任何帮助是极大的赞赏. 解决方案 在 3D 术语中，这称为“广告牌".广告牌是完全平坦的 2D 平面，上面有纹理，并且始终面向相机. 请参见此处了解纯 OpenGL 实现:http://nehe.gamed ..

发布时间：2022-01-09 09:32:40 opengl-es webgl 其他开发

WebGL:如何将值绑定到 mat4 属性?

在一些 WebGL 应用程序中，假设我们有一个 GLSL 顶点着色器，它的开头是这样的: 属性 vec4 foo1;属性 vec4 foo2;属性 vec4 foo3;属性 vec4 foo4; 以及一些用于为这些属性绑定数据结构的相应 Javascript 代码: var buf = gl.createBuffer(), loc;gl.bindBuffer(gl.ARRAY_BUFFER, ..

发布时间：2022-01-09 09:30:18 javascript opengl-es webgl glsles 前端开发

WebGL/OpenGL:性能比较

出于教育目的，我需要比较 WebGL 与 OpenGL 的性能.我有两个用 WebGL 和 OpenGL 编写的等效程序，现在我需要获取它们的帧速率并比较它们. 在 Javascript 中，我使用 requestAnimationFrame 来制作动画，我注意到它会导致帧速率始终保持在 60 FPS，并且只有在我切换选项卡或窗口时才会下降.另一方面，如果我总是递归调用渲染函数，窗口会因为明 ..

发布时间：2022-01-09 09:27:50 javascript opengl opengl-es three.js webgl 前端开发

WebGL - 渲染深度到 fbo 纹理不起作用

对于后处理着色器，我需要帧缓冲区的颜色和深度缓冲区.访问颜色缓冲区工作正常，但我在创建深度缓冲区时遇到问题.尝试将 texImage2D 用于深度纹理时，我总是收到 INVALID_ENUM 错误: texImage2D 中的 WebGL 错误 INVALID_ENUM(TEXTURE_2D, 0, DEPTH_COMPONENT16, 1536, 502, 0, DEPTH_COMPONENT ..

发布时间：2022-01-09 09:26:22 opengl-es webgl 其他开发

GLSL 编辑工具

我正在寻找某种与 GLSL 配合使用的工具.我想在 WebGL 应用程序中试验着色器，所以我正在寻找类似 RenderMonkey 的东西.据我所知 - RenderMonkey 不再受支持，因此必须有其他工具取代它. 如果我可以同时进行 RM 之类的“效果合成"和原始 GLSL 代码开发，那将是最好的. 解决方案 期待看到一些好的答案. 同时，我建议玩 ShaderToy 和 ..

发布时间：2022-01-09 09:18:29 ide opengl-es glsl webgl 其他开发

WebGL/Javascript:具有多个对象的对象转换

我想绘制几个对象，然后通过选择带有键盘索引的特定对象来转换它们.假设是 1-5. 我加载了画布. 我初始化了 webgl-context. 我定义了顶点/片段着色器并将它们绑定到我“使用"的程序(gl.useProgram("program")). 然后我初始化了一个 VertexBuffer(它是一个自己的函数).在那里，我定义了立方体的顶点并绑定了该缓冲区.在同一个函数中，我定 ..

发布时间：2022-01-09 09:17:36 javascript opengl-es webgl 前端开发