如何在不更改threeJS中的材质的情况下将顶点着色器赋予几何图形?

问题描述 投票:-1回答:1

我正在尝试使用我的顶点着色器修改某些几何形状,它基本上将某些线性变换应用于该几何形状的每个顶点,从而改变其形状。问题是我不知道该如何启用phong照明和纹理。一旦我通过材质API传递了顶点着色器,它就会自动呈现红色,并且一切看上去都很平坦。似乎这里没有进行照明计算。请帮助。

这里有一个演示,其中我将顶点着色器应用于多维数据集。https://jsfiddle.net/6593Lyve/4/

void main()
{
    vec3 p = position.xyz;
    float new_x = p.x*a11 + p.y*a12;
    float new_y = p.x*a21 + p.y*a22;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(new_x, new_y, p.z, 1.0);
}
graphics three.js fragment-shader vertex-shader
1个回答
0
投票

如果要使用全部材质功能,则应使用material.onBeforeCompile修改现有的着色器>

const material = new THREE.MeshPhongMaterial(...);
material.onBeforeCompile = function(info) {
  // change info.vertexShader, info.fragmentShader, and/or info.uniforms here
  console.log(info)
};

如果运行此命令,并在JavaScript控制台中对其进行检查,它将打印出类似的内容

{name: "MeshPhongMaterial", uniforms: {…}, vertexShader: "#define PHONG↵varying vec3 vViewPosition;↵#ifndef …clude <shadowmap_vertex>↵  #include <fog_vertex>↵}", fragmentShader: "#define PHONG↵uniform vec3 diffuse;↵uniform vec3 e…_alpha_fragment>↵ #include <dithering_fragment>↵}"}
name: "MeshPhongMaterial"
uniforms:
diffuse: {value: Color}
opacity: {value: 1}
map: {value: null}
uvTransform: {value: Matrix3}
alphaMap: {value: null}
specularMap: {value: null}
envMap: {value: null}
flipEnvMap: {value: -1}
reflectivity: {value: 1}
refractionRatio: {value: 0.98}
maxMipLevel: {value: 0}
aoMap: {value: null}
aoMapIntensity: {value: 1}
lightMap: {value: null}
lightMapIntensity: {value: 1}
emissiveMap: {value: null}
bumpMap: {value: null}
bumpScale: {value: 1}
normalMap: {value: null}
normalScale: {value: Vector2}
displacementMap: {value: null}
displacementScale: {value: 1}
displacementBias: {value: 0}
gradientMap: {value: null}
fogDensity: {value: 0.00025}
fogNear: {value: 1}
fogFar: {value: 2000}
fogColor: {value: Color}
ambientLightColor: {value: Array(3), needsUpdate: true}
lightProbe: {value: Array(9), needsUpdate: true}
directionalLights: {value: Array(1), properties: {…}, needsUpdate: true}
directionalShadowMap: {value: Array(0)}
directionalShadowMatrix: {value: Array(0)}
spotLights: {value: Array(0), properties: {…}, needsUpdate: true}
spotShadowMap: {value: Array(0)}
spotShadowMatrix: {value: Array(0)}
pointLights: {value: Array(0), properties: {…}, needsUpdate: true}
pointShadowMap: {value: Array(0)}
pointShadowMatrix: {value: Array(0)}
hemisphereLights: {value: Array(0), properties: {…}, needsUpdate: true}
rectAreaLights: {value: Array(0), properties: {…}, needsUpdate: true}
emissive: {value: Color}
specular: {value: Color}
shininess: {value: 30}
clippingPlanes: {value: null, needsUpdate: false}
__proto__: Object
vertexShader: "#define PHONG↵varying vec3 vViewPosition;↵#ifndef FLAT_SHADED↵   varying vec3 vNormal;↵#endif↵#include <common>↵#include <uv_pars_vertex>↵#include <uv2_pars_vertex>↵#include <displacementmap_pars_vertex>↵#include <envmap_pars_vertex>↵#include <color_pars_vertex>↵#include <fog_pars_vertex>↵#include <morphtarget_pars_vertex>↵#include <skinning_pars_vertex>↵#include <shadowmap_pars_vertex>↵#include <logdepthbuf_pars_vertex>↵#include <clipping_planes_pars_vertex>↵void main() {↵   #include <uv_vertex>↵   #include <uv2_vertex>↵  #include <color_vertex>↵    #include <beginnormal_vertex>↵  #include <morphnormal_vertex>↵  #include <skinbase_vertex>↵ #include <skinnormal_vertex>↵   #include <defaultnormal_vertex>↵#ifndef FLAT_SHADED↵    vNormal = normalize( transformedNormal );↵#endif↵   #include <begin_vertex>↵    #include <morphtarget_vertex>↵  #include <skinning_vertex>↵ #include <displacementmap_vertex>↵  #include <project_vertex>↵  #include <logdepthbuf_vertex>↵  #include <clipping_planes_vertex>↵  vViewPosition = - mvPosition.xyz;↵  #include <worldpos_vertex>↵ #include <envmap_vertex>↵   #include <shadowmap_vertex>↵    #include <fog_vertex>↵}"
fragmentShader: "#define PHONG↵uniform vec3 diffuse;↵uniform vec3 emissive;↵uniform vec3 specular;↵uniform float shininess;↵uniform float opacity;↵#include <common>↵#include <packing>↵#include <dithering_pars_fragment>↵#include <color_pars_fragment>↵#include <uv_pars_fragment>↵#include <uv2_pars_fragment>↵#include <map_pars_fragment>↵#include <alphamap_pars_fragment>↵#include <aomap_pars_fragment>↵#include <lightmap_pars_fragment>↵#include <emissivemap_pars_fragment>↵#include <envmap_common_pars_fragment>↵#include <envmap_pars_fragment>↵#include <gradientmap_pars_fragment>↵#include <fog_pars_fragment>↵#include <bsdfs>↵#include <lights_pars_begin>↵#include <lights_phong_pars_fragment>↵#include <shadowmap_pars_fragment>↵#include <bumpmap_pars_fragment>↵#include <normalmap_pars_fragment>↵#include <specularmap_pars_fragment>↵#include <logdepthbuf_pars_fragment>↵#include <clipping_planes_pars_fragment>↵void main() {↵   #include <clipping_planes_fragment>↵    vec4 diffuseColor = vec4( diffuse, opacity );↵  ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) );↵  vec3 totalEmissiveRadiance = emissive;↵ #include <logdepthbuf_fragment>↵    #include <map_fragment>↵    #include <color_fragment>↵  #include <alphamap_fragment>↵   #include <alphatest_fragment>↵  #include <specularmap_fragment>↵    #include <normal_fragment_begin>↵   #include <normal_fragment_maps>↵    #include <emissivemap_fragment>↵    #include <lights_phong_fragment>↵   #include <lights_fragment_begin>↵   #include <lights_fragment_maps>↵    #include <lights_fragment_end>↵ #include <aomap_fragment>↵  vec3 outgoingLight = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse + reflectedLight.directSpecular + reflectedLight.indirectSpecular + totalEmissiveRadiance;↵  #include <envmap_fragment>↵ gl_FragColor = vec4( outgoingLight, diffuseColor.a );↵  #include <tonemapping_fragment>↵    #include <encodings_fragment>↵  #include <fog_fragment>↵    #include <premultiplied_alpha_fragment>↵    #include <dithering_fragment>↵}"
__proto__: Object

顶点着色器在哪里

#define PHONG
varying vec3 vViewPosition;
#ifndef FLAT_SHADED
    varying vec3 vNormal;
#endif
#include <common>
#include <uv_pars_vertex>
#include <uv2_pars_vertex>
#include <displacementmap_pars_vertex>
#include <envmap_pars_vertex>
#include <color_pars_vertex>
#include <fog_pars_vertex>
#include <morphtarget_pars_vertex>
#include <skinning_pars_vertex>
#include <shadowmap_pars_vertex>
#include <logdepthbuf_pars_vertex>
#include <clipping_planes_pars_vertex>
void main() {
    #include <uv_vertex>
    #include <uv2_vertex>
    #include <color_vertex>
    #include <beginnormal_vertex>
    #include <morphnormal_vertex>
    #include <skinbase_vertex>
    #include <skinnormal_vertex>
    #include <defaultnormal_vertex>
#ifndef FLAT_SHADED
    vNormal = normalize( transformedNormal );
#endif
    #include <begin_vertex>
    #include <morphtarget_vertex>
    #include <skinning_vertex>
    #include <displacementmap_vertex>
    #include <project_vertex>
    #include <logdepthbuf_vertex>
    #include <clipping_planes_vertex>
    vViewPosition = - mvPosition.xyz;
    #include <worldpos_vertex>
    #include <envmap_vertex>
    #include <shadowmap_vertex>
    #include <fog_vertex>
}

现在您可以搜索和替换着色器的一部分

虽然看起来参考的shader chunks看起来像是begin_vertex是您想要的。

看起来像这样

begin_vertex

所以您的代码可能类似于

vec3 transformed = vec3( position );

您可以这样添加,还需要添加制服

vec3 p = position.xyz;
float new_x = p.x*a11 + p.y*a12;
float new_y = p.x*a21 + p.y*a22;
vec3 transformed = vec4(new_x, new_y, p.z);
© www.soinside.com 2019 - 2024. All rights reserved.