你如何"combine"一个ShaderMaterial和LambertMaterial?
How do you "combine"a ShaderMaterial and LambertMaterial?
首先,非常感谢您的出色工作和社区。
我正在尝试写一个简单的低多边形风格的水 material。
我知道有不同的方式来编写这种东西,我希望尽可能多地在 js 脚本中完成(我来自 C# 开发,我对前端还不是很满意).
经过几个小时在网上编译信息后,我能理解的一种方式是:
var waterVertexShader =
"attribute float vertexDisplacement;" +
"uniform float time;" +
"varying vec3 vUv;" +
"void main() {" +
" vUv = position;" +
" vUv.y += sin(time) * 0.01;" +
" gl_Position = projectionMatrix * modelViewMatrix * vec4(vUv, 1.0);"+
"}"
;
var waterFragmentShader =
"void main() {" +
"gl_FragColor = vec4(0.65, 0.88, 1, 1);" +
"}";
},
flatShading : true,
vertexShader: waterVertexShader,
这让我开始想要的行为,但这不是我的问题。
现在,如果我想继承 Lambert 或 Phong material 属性,正确的方法是什么?
这听起来很基础,但这是我发现的唯一相关 link:
ThreeJS - Extend Lambert Shader with Custom VertexShader
没有答案。
感谢您的关注。
有几种方法可以增强 three.js
中的内置 material:
- 您可以使用回调 Material.onBeforeCompile(). This approach is demonstrated in the following example。如果您只想对着色器代码添加较小的增强功能,这应该是您的首选。
- 从头开始使用
RawShaderMaterial
或 ShaderMaterial
创建自定义 material,并重新使用库中的现有着色器块。这种方法非常灵活,但需要对 three.js
的 material 系统的内部结构有很好的了解。
- 当然你可以 modify/monkey 修补现有的着色器块,但通常推荐这种方法(你有效地更改库代码并带来所有后果)。
- 另一种方法是使用有前途但实验性的
NodeMaterial
。然而,这种技术没有记录在案,到目前为止还没有成为核心的一部分。有一些示例可以演示这样的用法 one.
首先,非常感谢您的出色工作和社区。
我正在尝试写一个简单的低多边形风格的水 material。
我知道有不同的方式来编写这种东西,我希望尽可能多地在 js 脚本中完成(我来自 C# 开发,我对前端还不是很满意).
经过几个小时在网上编译信息后,我能理解的一种方式是:
var waterVertexShader =
"attribute float vertexDisplacement;" +
"uniform float time;" +
"varying vec3 vUv;" +
"void main() {" +
" vUv = position;" +
" vUv.y += sin(time) * 0.01;" +
" gl_Position = projectionMatrix * modelViewMatrix * vec4(vUv, 1.0);"+
"}"
;
var waterFragmentShader =
"void main() {" +
"gl_FragColor = vec4(0.65, 0.88, 1, 1);" +
"}";
},
flatShading : true,
vertexShader: waterVertexShader,
这让我开始想要的行为,但这不是我的问题。
现在,如果我想继承 Lambert 或 Phong material 属性,正确的方法是什么?
这听起来很基础,但这是我发现的唯一相关 link: ThreeJS - Extend Lambert Shader with Custom VertexShader 没有答案。
感谢您的关注。
有几种方法可以增强 three.js
中的内置 material:
- 您可以使用回调 Material.onBeforeCompile(). This approach is demonstrated in the following example。如果您只想对着色器代码添加较小的增强功能,这应该是您的首选。
- 从头开始使用
RawShaderMaterial
或ShaderMaterial
创建自定义 material,并重新使用库中的现有着色器块。这种方法非常灵活,但需要对three.js
的 material 系统的内部结构有很好的了解。 - 当然你可以 modify/monkey 修补现有的着色器块,但通常推荐这种方法(你有效地更改库代码并带来所有后果)。
- 另一种方法是使用有前途但实验性的
NodeMaterial
。然而,这种技术没有记录在案,到目前为止还没有成为核心的一部分。有一些示例可以演示这样的用法 one.