jjzjj

javascript - JavaScript 中的内联 webgl 着色器代码

我正在编写一个使用一些WebGL代码的简单Javascript库。我想在.js文件中包含着色器源代码,因为我的替代方法是将它们作为脚本标记包含在每个页面中,或者将它们作为单独的文件作为AJAX加载。这些选项都不是特别模块化的。但是,由于javascript中缺少多行字符串,我对如何内联WebGL代码没有任何好的想法。有没有我没有想到的方法? 最佳答案 自2009年左右以来,JavaScript在除IE之外的所有浏览器中都有多行字符串。varshader=`codegoeshere`; 关

javascript - ND-Buffer 和 G-Buffer 有什么区别?

我是WebGL的菜鸟。我读了几篇关于ND-Buffers和G-Buffers的帖子,好像它是WebGL开发的战略选择。ND-Buffers和G-Buffers与渲染管线有什么关系?ND-Buffers是否仅用于前向渲染,而G-Buffer仅用于延迟渲染?如何实现两者的JavaScript代码示例将有助于我理解差异。 最佳答案 G-Buffers只是一组通常用于延迟渲染的缓冲区。Wikipedia给出了g-buffer中常见数据类型的一个很好的例子漫反射颜色信息世界空间或屏幕空间法线深度缓冲区/Z缓冲区这3个缓冲区的组合称为“g缓冲区

Unity-WebGL基于JS实现网页录音

   因为该死的Unity不支持WebGL的麦克风,所以只能向网页借力,用网页原生的navigator.getUserMedia录音,然后传音频流给Unity进行转AudioClip播放。   还有一点非常重要:能有同事借力就直接问,厚着脸皮上,我自己闷头两天带加班,不如同事谭老哥加起来提供帮助的俩小时,很感谢他,虽然是他们该做的,但我一直没提出,而且我方向错了😂😂😂版本:Unity:2021.3.6f1Github库:UnityWebGLMicrophone相关代码Unity端的.cs .jslib和WebGL端的.js..jslibWebGLRecorder.jslib这个需要放在Unit

javascript - 读取 WebGLTexture 中的像素(将 WebGL 渲染到纹理)

我在GPU上生成纹理并将其渲染到我自己的帧缓冲区对象。它工作正常,纹理被渲染到我可以传递给其他着色器的WebGLTexture。但是我想访问javascript中的WebGLTexture像素。有办法实现吗?目前我正在使用gl.ReadPixels在我将纹理绘制到我的帧缓冲区后读取像素。这工作正常,但如果我可以直接访问WebGLTextureObject中的像素不是更好吗?我想要完成的是:我有GLSLperlin噪声着色器,可以在GPU上渲染高清高度图和法线贴图。我想将高度图传递给CPU,以便为网格生成顶点。我当然可以只在顶点着色器中定位顶点,但我需要它在CPU中进行碰撞检测。我希望我

javascript - 三.js/WebGL : Large spheres appear broken at intersection

让我先声明我对3D图形非常缺乏经验。问题我正在使用Three.js。我有两个球体(故意)在我的WebGL模型中发生碰撞。当我的球体非常大时,重叠的球体在它们相交的地方显得“splinter”,但较小的球体渲染得非常好。我对某些对象使用如此大的单位有一个非常具体的原因,缩小对象并不是一个真正的选择。例子这是一个更大球体的fiddle:http://jsfiddle.net/YSX7h/对于较小的:http://jsfiddle.net/7Lca2/代码varradiusUnits=1790;//179000000varcontainer;varcamera,scene,renderer;

javascript - 使用 SVG 或 WebGL 的 3D 形状

您好,我想在浏览器中渲染一个交互式3D球体。它上面的纹理将是一张世界地图,所以基本上我试图创建一个可以使用map在任何方向旋转的地球仪。我很擅长使用SVG渲染2D图像,但不确定如何在SVG中渲染3D形状。是否可以在SVG中渲染3D形状,如果可以,如何渲染?如果不是,WebGl是更好的选择吗? 最佳答案 看看three.js它对实现进行了一些抽象(带有WebGL/SVG/Canvas后端)。SVG是一种2d矢量图形格式,但您可以将3d形状投影到2d上,因此可以使用SVG渲染3d对象,这只是一些工作(最好留给javascript库)。

javascript - 使用 WebGL 进行二维图像处理

我打算用JS创建一个简单的照片编辑器。我的主要问题是,是否可以创建实时渲染的滤镜?例如,调整亮度和饱和度。我只需要一张2D图像,我可以在其中使用GPU应用滤镜。我读过的所有教程都非常复杂,并没有真正解释API的含义。请指出正确的方向。谢谢。 最佳答案 我打算写一个教程并将其发布在我的博客上,但我不知道我什么时候有时间完成所以这就是我所拥有的Here'samoredetailedsetofpostsonmyblog.WebGL实际上是一个光栅化库。我接收属性(数据流)、制服(变量),并希望您提供二维的“裁剪空间”坐标和像素的颜色数据。

javascript - 如何强制谷歌地图进入精简模式(无 WebGL)

IE11无法处理Googlemap的WebGL版本。例如,尝试在此页面上四处拖动map:https://developers.google.com/maps/documentation/javascript/examples/map-simple但是,如果您访问maps.google.com,您会看到它使用精简模式(Canvas)并且运行起来更加流畅。如果访问该页面不会自动使用Canvas模式,请转到此URL:www.google.com/maps/preview/?force=canvas我正在针对MapsjavascriptAPI进行开发,因此我需要知道如何强制使用此模式,以免我的

javascript - 什么会导致 requestAnimationFrame 在高效的 webgl 循环中丢帧?

我一直在编写一个javascript演示/测试来学习WebGL。我有一个相当高效的游戏循环结构(根据Chrome开发工具)只需1-2毫秒即可运行。我正在使用requestAnimationFrame来安排循环的运行(因为这显然是执行60fps动画的“正确”方式)。当我查看构建框架的时间轴时,实际的javascript代码很少,但框架的“空闲”部分可以将框架推到30fps线上。FPS计数器显示20-40fps,有很多掉落(几乎像锯齿)。如果我的渲染循环已经是1-2毫秒,而它必须适应16毫秒才能运行60fps,还有什么我可以解释的吗?如果我将循环转换为setTimeout循环,它可以轻松保

javascript - 适合与 D3js 结合的库,以允许绘制到 webgl (2D)

这是我正在尝试做的:http://mbostock.github.com/d3/talk/20111116/iris-splom.html但我想在webgl2d中执行此操作(因为SVG性能非常慢,渲染10kSVG仅已降至12fps)通过快速搜索,我发现了几个webgl-2d库:cocos2d-html5,pixijs,Three.js和webgl-2d(废弃?)它们看起来很简单,但我想做的是数据可视化。cocos和pixijs是2d游戏库。我是webgl和那些库的新手,所以SO方面的专家你们能推荐一下吗?我需要的东西的总结:互动:地block内的矩形选择。单击以选择某些元素。缩放和平移