使用 Three.js 在片段着色器中手动选择 mipmap 的 lod

2024-04-04

我正在使用 Three.js 中的 glsl es 编写一个基于物理的着色器。为了添加镜面全局照明,我使用内部带有 mipmap 链的立方体贴图 dds 纹理(按照 CubeMapGen 的说明进行预先计算here http://seblagarde.wordpress.com/2012/06/10/amd-cubemapgen-for-physically-based-rendering/)。我需要在片段着色器中访问此纹理,并且我想手动选择 mipmap 的索引。执行此操作的正确函数是

vec4 textureCubeLod(samplerCube sampler, vec3 coord, float lod)

但它仅在顶点着色器中可用。在我的片段着色器中我使用类似的函数

vec4 textureCube(samplerCube sampler, vec3 coord, float bias)

但效果不佳,因为偏差参数只是添加到自动计算的细节级别中。因此,当我放大或缩小场景时,mipmap 的 LOD 会发生变化,但对于我的着色器来说,它必须是相同的(它必须仅取决于粗略参数,如上面的链接中所述)。

我想手动选择片段着色器中的 mipmap 级别仅取决于材质的粗糙度(例如使用公式mipMapIndex = roughness*numMipMap),所以它必须与距离一致,并且在缩放时不会自动改变。我该如何解决这个问题?


它不能与 webGL atm 一起使用,因为不支持此功能。尽管您可以使用最新版本的 chrome canary 来尝试textureLOD 扩展,但它仍然需要一些调整。去查看标志并寻找这个:

启用 WebGL 草稿扩展

WebGL 纹理立方体偏差导致接缝 https://stackoverflow.com/questions/22977236/webgl-texturecube-bias-causing-seams

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 Three.js 在片段着色器中手动选择 mipmap 的 lod 的相关文章

  • 使用 Three.js 在片段着色器中手动选择 mipmap 的 lod

    我正在使用 Three js 中的 glsl es 编写一个基于物理的着色器 为了添加镜面全局照明 我使用内部带有 mipmap 链的立方体贴图 dds 纹理 按照 CubeMapGen 的说明进行预先计算here http seblaga
  • 在android中使用OpenGL在按钮上单击绘制形状

    作为 android OpenGL 部分的新手 我已经下载了现场给出的示例使用 OpenGL ES 显示图形 http developer android com training graphics opengl index html so
  • 如何正确更新 OpenGL Es 2.0 中的顶点数组?

    当我在 OpenGL 2 0 中更新 iOS 上的顶点数组时 原始顶点数据保留在屏幕上 即第一个刷新是持久的 我发送到 GPU 的初始点集每帧都会渲染 但第二个刷新是持久的 我发送到 GPU 的初始点集每帧都会渲染 第 3 次 第 4 次
  • OpenGL ES 2.0 多个程序或多着色器还是什么?它是如何工作的?

    问题 TL DR 我的问题从根本上来说是我不知道 OpenGL ES 2 0 期望我如何编写和使用多个着色器 或者如果甚至建议 期望一个人会这样做 这里的基本问题是 如果我有一个苹果 一块发光的岩石和一个模糊网格 它们都在同一个 3D 世界
  • 如何在 Three.js 中使用反射?

    我想在带有 Three js 的 WebGL 页面中拥有一个反射立方体表面 它应该类似于手机显示屏 反射一些光 但它仍然必须是黑色的 我创建了一个反射立方体 以及反射球体 的示例 并附有详细的注释 现场版本位于 http stemkoski
  • Material.alphaTest 是什么意思?

    在过去的几天里 我一直在非相交对象的透明度方面遇到重大问题 我遇到了设置的建议alphaTest将材料的值调整为0 5 从而解决了问题 太好了 但我想更好地理解它的含义以及它如何如此优雅地解决问题 有人可以建议吗 从一个简单的实验来看 这似
  • 从数组 THREE.js 创建纹理

    我正在研究地形生成器 但我不知道如何处理颜色 我希望能够生成一张占据整个 PlaneGeometry 的图像 我的问题是如何根据我的高度图创建一个覆盖整个 PlaneGeometry 没有环绕 的单个图像 我可以想到一种方法 但我不确定它是
  • Three.js 中的文本几何

    我在 Three js r74 中的 TextGeometry 遇到一些问题 我该如何正确实施 这是我的代码笔 codepen io cheesyeyes pen eJqZxK 提前致谢 好吧 对于每个正在寻找简单答案而不是链接和其他超载示
  • 如何在 Three.js 中将 geoJSON 绘制为网格而不是线条,并填充颜色?

    我正在使用 Three js 制作一个地球仪 并将添加一些数据层 所有图层都将从 geoJSON 创建 我已将其设置为使地球仪 第一个数据文件 包含国家 地区 显示为线条 这使用三GeoJSON https github com jdomi
  • 可点击的精灵标签?

    我一直在玩精灵文本标签 更具体地说是这个例子 http stemkoski github io Three js Sprite Text Labels html http stemkoski github io Three js Sprit
  • 在 Three.js 中渲染具有大量对象的多个场景的最佳方式

    想象一下 您想要绘制两个场景 每个场景都有数百个球体 并提供在这些场景之间切换的功能 做到这一点的最佳方法是什么 目前 一个开关大约需要 4 到 5 秒 因为我要删除 创建和绘制每个开关上的所有球体 下面是在场景切换上运行的代码示例 cle
  • 无法让 raycaster.intersectObjects() 从远处返回相交的对象

    我有一个包含几个随机数的散点图Sprite用作数据点的对象 我想检测鼠标指针 光标 和Sprite对象 我用来检测交叉点的设置如下 var projector new THREE Projector window addEventListe
  • 在 Three.js 中将贝塞尔曲线转换为平面道路

    我试图根据之前计算得到的一些贝塞尔曲线在 Three js 中绘制一条弯曲的道路 问题是我找不到转换曲线序列的方法 一条从上一条曲线的末尾开始 到一个曲面 我有一个 3D 场景 其中有一些汽车 一条用飞机创建的道路 并且绘制了即将到来的道路
  • 纹理不适用于网格 - OpenGL

    我正在使用 OpenGL Es 我已成功加载 obj 文件 网格 并且显示良好 但当我应用纹理时 它不显示 我添加了下面的代码 public void draw GL10 gl bind the previously generated t
  • THREE.JS,忽略父级的轮换

    我试图使子对象跟随父级位置并表现得像一个普通的子对象 但是我希望它保持其旋转不变 在不影响性能的情况下 最好的方法是什么 我的CPU预算很紧张 已经运行了2个工作线程并且有很多对象 是否有设置只允许孩子的位置受到影响 同样重要的是 当父级旋
  • 解决 Three.js / webGL 中的 gl_PointSize 限制

    我正在使用 Three js 创建交互式数据可视化 此可视化涉及渲染 68000 个节点 其中每个不同的节点具有不同的大小和颜色 最初我尝试通过渲染网格来实现此目的 但事实证明这非常昂贵 我当前的尝试是使用 Three js 粒子系统 每个
  • Three.js :face4 生成三角形而不是正方形

    我正在尝试使用 tree js 自定义几何图形生成一个正方形 但是这段代码 var cubeGeo new THREE Geometry cubeGeo vertices push new THREE Vector3 25 25 25 cu
  • 如何在 Three.js 场景中包含 OVRManager?

    我创建了几个 Three js Javascript 演示应用程序 正在我的新 Oculus Go 中进行试验 我正在尝试让 Go 控制器在我的应用程序中执行某些操作 根据 Oculus 开发人员中心的说法 最好的办法是将 OVRManag
  • Three.js canvas.toDataURL 有时为空

    我正在尝试使用 html2canvas js 渲染 THREE js 场景 一些覆盖的 HTML 元素 有用大多数时候 但并非一直如此 在失败的情况下 将渲染 HTML 元素 背景 覆盖层等 但不会渲染其他元素 THREE js 场景表现得
  • Android OpenGL ES 2.0 模拟器

    好吧 我有一个支持 OpenGl ES 2 0 HTC Desire 的设备 当然在设备上部署应用程序比在模拟器上部署应用程序要快得多 默认的android模拟器不支持2 0 androidX86项目和类似的androbox项目不支持本机代

随机推荐