问题标签 [shadermaterial]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
1324 浏览

three.js - 自定义 ShaderMaterial 贴图问题

我正在尝试创建一个自定义 ShaderMaterial 重用 ShaderChunks,但在设置map参数时似乎有问题。

在我的自定义着色器中,当我加载纹理并将材质mapuniforms.map.value值设置为纹理时,它不会从我的着色器中的纹理中获取值,尽管它似乎确实设置了USE_MAP定义。

这是一个小提琴

在着色器中,如果USE_MAP已定义,它会变为绿色,但它也应该获取贴图值。
我错过了一些简单的东西吗?

以下是重要的部分:)

设置着色器

创建材料

添加纹理

0 投票
1 回答
3172 浏览

three.js - Three.js ShaderMaterial 光照不工作

我正在尝试使用 Three.js ShaderMaterial 并尝试实现照明。我有 r70 的工作代码,但相同的代码(稍作更改 - MAX_POINT_LIGHTS 常量已重命名为 NUM_POINT_LIGHTS)不适用于 r76。

查看 WebGL Inspector 中的跟踪,很明显没有光照数据被发送到着色器。那么,灯光坏了还是我需要设置其他东西才能让它工作?

使用 r70(工作)

http://codepen.io/anon/pen/KzjXNr?editors=1010

片段着色器

JavaScript - 使用 UniformsUtils 和 UniformsLib 设置 Shadermaterial

使用 r76 (fuzzed)

http://codepen.io/anon/pen/ZWdXLZ?editors=1010

片段着色器

JavaScript

不变

0 投票
0 回答
275 浏览

opengl-es - 带有预定义灯光的 THREE.js 自定义着色器

我关注了基于 THREE.BlendShader 和 AlteredQualia JupiterShader制作的 BlendShader 。我正在努力使用此着色器将定向光添加到材质中。我已经阅读了本教程,但它仍然渲染完全照亮的对象,而不考虑定向光。在定义时我可能在最后一行做错了,gl_FragColor但无法弄清楚它是什么。请帮忙。谢谢你。

片段着色器:

0 投票
0 回答
1891 浏览

javascript - 三.js 将雾添加到 ShaderMaterial

我对 JS 非常陌生,尤其是 Three.js 中的着色器。目前,我只是想在http://threejs.org/examples/#webgl_gpgpu_birds的 Birds 示例中使用的 ShaderMaterial 上启用雾。我正在构建一个基于水下的应用程序,因此将以类似的方式渲染鱼,但是在尝试了此处的所有示例/问题以及许多其他搜索后,我似乎无法使其正常工作。

似乎加载如下所示的外部着色器文件(我已将 SO 上最近回答的问题之一与 Birds 示例中的实际着色器代码合并,希望它能起作用)是流行的方法,但现在我有加载它和访问着色器的问题。这是我的 CustomFogShader 类:

当尝试访问 ShaderMatreial 构造函数中的着色器时,我在 CustomShader 上得到未定义的错误。

我读过我需要使用 ShaderLoader 类.. 但我能找到的唯一示例分别加载每个着色器,所以我想我的问题是:如何加载此文件并访问 ShaderMaterial 设置中的着色器?或者,有谁知道更好的方法来让 scene.fog 影响示例中的 Birds ShaderMaterial?

经过多次尝试和失败后,我不知所措:(

提前感谢您的任何建议!

0 投票
1 回答
481 浏览

three.js - 如何将多个顶点着色器添加到 ShaderMaterial?

在 THREEJS 中创建 ShaderMaterial 时,传递片段和顶点着色器:

但我正在关注一个使用两遍顶点着色器的教程:

但是如何将两遍顶点着色器添加到 Threejs 材质?

我仍在尝试学习如何使用着色器,所以如果我走错了方向,请告诉我......

0 投票
1 回答
233 浏览

three.js - 如何保持一个json模型在three.js场景中旋转的发光效果?

我在场景中添加了一个带有发光效果的 json 模型。

如下: 在此处输入图像描述

我尝试自动旋转 json 模型。但是,它在旋转时看起来很奇怪。模型的发光效果不起作用。 在此处输入图像描述 在此处输入图像描述

我假设当这个模型旋转时,json模型的位置不会改变。结果,当这个模型旋转时,ShaderMaterial 的 viewVector.value 是恒定的(我不改变相机的位置)。

这是 Three.ShaderMaterial。

顶点着色器和片段着色器

三.ShaderMaterial。

在这种情况下我应该如何修改代码?这是演示源代码

0 投票
2 回答
2335 浏览

three.js - Threejs DataTexture Not Updating

UPDATE: Issue was that texData object was recreated each time and thus reference for DataTexture was lost. Solution by WestLangley was to overwrite the data in texData instead of recreating texData object.

I have a simple threejs scene with a DataTexture in a ShaderMaterial. The data array passed to it once during initialization is updated on mouse events. However the DataTexture does not seem to update.

Did i assign uniforms or texture data wrongly? Or using the needsUpdate flags wrongly? It does work when deleting and recreating the texture, material, mesh and scene objects each time, but this shouldnt really be necessary as i have seen from many examples which i could however not reproduce.

Note that the data itself is updated nicely, just not the DataTexture.

0 投票
0 回答
460 浏览

three.js - 三.js shaderMaterial给粒子添加纹理

我正在尝试为我在 three.js 中使用 BufferGeometry 创建的粒子添加纹理。

我相信我正在正确加载材料,问题出在我的片段着色器中,但由于我是three.js 的新手,所以无法解决这个问题。我设法使用几何而不是 BufferGeometry 获得了我想要的效果:https ://codepen.io/phillip-hogan/pen/mMJdXY/?editors=0010

...但我真的需要理想地使用 BufferGeometry。下面是我的代码:

...以及我的顶点和片段着色器代码:

https://codepen.io/phillip-hogan/pen/VzaqEV/?editors=0010

0 投票
1 回答
888 浏览

three.js - three.js 中的多地图通道模型和纹理

我试图在 three.js 中使用两个以上的贴图通道来为我的模型分配纹理。令我惊讶的是,three.js 中没有原生材质支持多组 uv。因此,我必须使用 ShaderMaterial 并编写自己的顶点/片段着色器才能访问多个贴图通道。

现在我确实设法让多通道 uvs 使用我写的一个简单代码:

然而,我的问题是我基本上需要一个具有此功能的着色器和 Phong 着色器的一些基本特性:照明(来自场景灯光)和镜面高光。我完全迷失在这里。我已经尝试寻找方法来将此功能添加到本机着色器或将上述功能从 phong 材质添加到我自己的着色器,但没有发现任何信息足以用我非常基本的编码技能做到这一点.. 任何人都可以进来帮帮我吗?


编辑:

感谢pailhead让它与 onBeforeCompile 一起工作。这是在 r89 上,更新代码如下:

0 投票
1 回答
460 浏览

three.js - 带点着色器的threejs metaballs

我正在尝试在 2pha 制作的 ThreeJS 中测试一个简单的点着色器:https ://2pha.com/demos/threejs/shaders/simple_dots.html

使用 Marching Cubes 的元球似乎无法正常工作:https ://threejs.org/examples/webgl_marchingcubes.html 。这是UV坐标问题吗?ThreeJS 版本有一个enableUvs标志,但似乎还不够。

这里着色器传递给ShaderMaterial