我正在尝试使用我的顶点着色器修改某些几何形状,它基本上将某些线性变换应用于该几何形状的每个顶点,从而改变其形状。问题是我不知道该如何启用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);
}
如果要使用全部材质功能,则应使用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);