Web 着色器 - three.js ，需要修复吗？

Question

我使用 vUv = uv 来处理 three.js material 二十面体几何着色器。但是没有用，我需要一些帮助来修复这个着色器：

var container, 
    renderer, 
    scene, 
    camera, 
    mesh, 
    start = Date.now(),
    fov = 30;

window.addEventListener( 'load', function() {
container = document.getElementById( "container" );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 
    fov, 
    window.innerWidth / window.innerHeight, 
    1, 
    10000 );
camera.position.z = 100;
camera.target = new THREE.Vector3( 0, 0, 0 );
scene.add( camera );
material = new THREE.ShaderMaterial( {
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent
} );
mesh = new THREE.Mesh( 
    new THREE.IcosahedronGeometry( 20, 4 ), 
    material 
);
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
render();
} );

function render() {
renderer.render( scene, camera );
requestAnimationFrame( render );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.js"></script>
<head>
    <title>Shader test</title>
<script type="x-shader/x-vertex" id="vertexShader">
vUv = uv;
varying vec3 N;
varying vec3 I;
varying vec4 Cs;
void main()
{
    vec4 P = gl_ModelViewMatrix * gl_Vertex;    
    I  = P.xyz - vec3 (0);
    N  = gl_NormalMatrix * gl_Normal;
    Cs = gl_Color;
    gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex; 
    //gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
} 
</script>
<script type="x-shader/x-vertex" id="fragmentShader">
varying vec2 vUv;
varying vec3 N;
varying vec3 I;
varying vec4 Cs;
uniform float edgefalloff;
uniform float intensity;
uniform float ambient;
void main()
{
    float opac = dot(normalize(-N), normalize(-I));
    opac = abs(opac);
    opac = ambient + intensity*(1.0-pow(opac, edgefalloff));
    //opac = 1.0 - opac;  
    gl_FragColor =  opac * Cs;
    gl_FragColor.a = opac;
    //gl_FragColor = vec4( vec3( vUv, 0. ), 1. );
}
</script>
</head>
<body>
    <div id="container"></div>
</body>

Answer 1

尝试：

<script type="x-shader/x-vertex" id="vertexShader">
varying vec3 vUv;
varying vec3 N;
varying vec3 I;
varying vec4 Cs;
void main()
{
    vUv = uv;
    vec4 P = gl_ModelViewMatrix * gl_Vertex;    
    I  = P.xyz - vec3 (0);
    N  = gl_NormalMatrix * gl_Normal;
    Cs = gl_Color;
    gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex; 
    //gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
} 
</script>

注意设置 vUv = uv 的位置。

此外，您的两个着色器标签都带有 type="x-shader/x-vertex"，片段着色器应该是 type="x-shader/x-fragment"，（虽然它可能没有什么区别）。

此外，您在顶点着色器中使用了以 gl_ 开头的变量。我不确定这些是否可用。
three.js（据我所知）中顶点着色器的可用变量是：
- 统一 mat4 modelMatrix - object.matrixWorld
- 统一 mat4 modelViewMatrix - camera.matrixWorldInverse * object.matrixWorld
- 均匀 mat4 projectionMatrix - camera.projectionMatrix
- 统一 mat4 viewMatrix - camera.matrixWorldInverse
- uniform mat3 normalMatrix - modelViewMatrix
的逆转置 - uniform vec3 cameraPosition - 相机在世界中的位置 space
- 属性 vec3 位置 - 顶点位置
- 属性 vec3 法线 - 顶点法线
- 属性 vec2 uv
- 属性 vec2 uv2

Answer 2

是否需要添加：

var renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});

一些着色器需要在 webgl 上有这种类型的定义，material需要三个。

var customMaterial = new THREE.ShaderMaterial({
    uniforms: {
        p: { type: "f", value: 3 },
        glowColor: { type: "c", value: new THREE.Color(0x84ccff) },
    },
    vertexShader: $('#vertexShader').text,
    fragmentShader: $('#fragmentShader').text,
    side: THREE.DoubleSide,
    blending: THREE.AdditiveBlending,
    transparent: true,
    depthWrite: false
});

您需要有一个对象才能使用 material 着色器。我没有使用 uv 纹理进行测试 - 仅使用此 customMaterial。尝试使用它 x-shader/x-vertex，另一个 x-shader/x-fragment 甚至可以与 x-shader/x-vertex 和 x-shader/x-vertex 一起使用。

Web 着色器 - three.js ，需要修复吗？

Web shader - three.js , need to fix?

shader

vertex-shader

fragment-shader

three.js