问题标签 [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 投票
1 回答
490 浏览

three.js - 三.js。如何将自定义材质用于场景背景而不是颜色或纹理?

说颜色或纹理的文档scene可用于scene.background. 我想将 aShaderMaterial与我自己的自定义着色器一起使用。我怎样才能做到这一点?

具体来说,我想在前景元素后面绘制一个色带。这是片段着色器:

uXYPixel是一个uniform vec2window.innerWidthwindow.innerHeight

0 投票
0 回答
62 浏览

three.js - Theejs - Change texture on collada element with uses ShaderMaterial

So I have this Collada (dae) export from a 3d model application for creating packaging.

I've managed to import this model in my scene with

This works. Animations do also work.

However this dae file has some references to external textures. And I want to programmaticly replace some of them.

The dea from an export uses ShaderMaterial elements and I have no idea to apply a new texture to it. Everything I do will make it black or does nothing.

What I tried

I know the name of the image texture that is beeing used that I want to replace. The name is TextureResource129.png.

So what I do:

  • Load the new texture
  • Loop through all nodes/children in the dea that is in the scene.
  • I check if the node has a material object and is a mesh
  • I clone the material
  • I replace everywhere the old texture image is in the object tree by the new texture image. The export has them on 4 possible locations.
  • Then I add the adjusted material again.
  • Then the object turns black in the scene

The code:

This makes the object black. So I tried only cloning the material and attaching it again to the same node, without changes. But even then it also turns black again:

So the question is:

How can I change the texture of a collada (.dea) file programatic when it is in the scene?

0 投票
1 回答
413 浏览

three.js - Three.js - 如何旋转着色器材质?

我的问题是试图让天空在它的 z 轴上旋转。例如,如果我将天空旋转 180 度,太阳光的阴影应该显示在相反的方向。

代码沙箱:https ://codesandbox.io/s/friendly-cloud-c00zr?file=/src/main.js :

这是我在main.js文件中创建天空的地方:

我已经尝试过rotateZsky.rotation但无济于事。

文件中的代码sky.js

https://codesandbox.io/s/little-microservice-7nh53?file=/src/sky.js

是原始three.js sky-sun-shader的修改迭代:

https://threejs.org/examples/webgl_shaders_sky.html

我改变的只是up天空的位置和它的几何形状从boxBuffersphereBuffer

我会在这里发布代码,但它有超过 200 行代码。

我想知道是否有一种特殊的方式来旋转ShaderMaterialsky.js

0 投票
0 回答
17 浏览

javascript - Three.js - 将自定义 ShaderMaterial 应用于 OBJ

我正在尝试将自定义 ShaderMaterial 应用于通过 OBJLoader 加载的 OBJ。该材质适用于 PlaneBufferGeometry 并且渲染良好。但是,当应用于 obj 时,似乎没有任何东西(可见)添加到场景中。

下面的代码示例显示了将材质应用于 PlaneBufferGeometry 以及加载的 OBJ 的示例。

下面是代码:

片段着色器

顶点着色器:

设置

0 投票
1 回答
11 浏览

shadermaterial - UNITY3D - Pink prefab because of BumpedDiffuse shader

I'm trying to download assetBundle from server and unzip it. All is working fine with Standard Shader Material (u can see it on the video).

But if material in assetBundle is Mobile/BumpedDiffuse so prefab instantiated with pink color like no material attached to prefab. But if I click to prefab I can see that there is attached material on this prefab. And there are texture map on material. And the most interesting thing that if i changed shader to any other all is fine even if I changed from Mobile/BumpedDiffuse to Mobile/BumpedDiffuse

In general, watch my video.

Thank you.

Video with problem on YouTube

0 投票
1 回答
335 浏览

three.js - ThreeJS 点(点云)与使用自定义着色器材质的光照

编码使用:

  • 使用 ThreeJS v0.130.1
  • 框架:Angular 12,但这与问题无关。
  • 在 Chrome 浏览器上测试。

我正在构建一个获得超过 100K 点的应用程序。我使用这些点在屏幕上渲染一个THREE.Points对象。

我发现默认的 THREE.PointsMaterial不支持光照(无论是否在场景中添加灯光,这些点都是可见的)。

所以我尝试实现一个自定义ShaderMaterial。但是我找不到向渲染对象添加照明的方法。

这是我的代码正在执行的 示例: StackBlitz 上的示例应用程序显示了我当前的尝试 在此代码中,我使用点云数据、法线和颜色的示例值,但其他一切都与我的实际应用程序相似。我可以看到 3D 对象,但需要使用法线进行更适当的照明。

我需要帮助或指导来实施以下内容:

  1. 为自定义着色器材质添加光照。我用谷歌搜索并尝试了很多东西,到目前为止没有成功。

  2. 使用法线,展示光照的效果(在这个示例代码中,法线是固定在 Y 轴方向的,但我在实际应用中是根据一些矢量逻辑计算它们的)。所以计算法线已经完成,但我想用它们在自定义着色器材质中显示光照/阴影效果。

在这个示例中,颜色属性设置为固定的红色,但在实际应用中,我可以使用从纹理到颜色属性的 UV 范围应用颜色。

请告知我如何/是否可以根据点云的法线获得照明。谢谢。

注意:我查看了这个Stackoveflow 问题,但它只涉及更改点的 alpha/透明度,而不涉及照明。

0 投票
1 回答
43 浏览

three.js - 在 Three.js r136 的 ShaderMaterial 中实现灯光和阴影

r136 中当前在 ShaderMaterial 中混合灯光阴影颜色的解决方案是什么?我已经找到了雾支持的解决方案。我在以前的版本( r108
)中找到了一些例子,比如这个代码框。

实际上,我正在寻找这种结果:代码和
我应该将 MeshPhongMaterial 着色器复制为我自己的着色器的代码库吗?

在我的项目中必须使用自定义着色器,这就是我不使用内置材质的原因。

有什么想法或例子吗?
谢谢 !