Question

我使用vUv = uv来处理IcosahedronGeometry的three.js材质着色器。但是没有用，我需要一些帮助来修复这个着色器：

＆＃13;

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 );
}

＆＃13;

<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>

＆＃13;

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_开头的变量。我不确定这些是否可用。
三个.js（我知道）中顶点着色器中的可用变量是：
- 统一mat4 modelMatrix - object.matrixWorld
- 制服mat4 modelViewMatrix - camera.matrixWorldInverse * object.matrixWorld
- uniform mat4 projectionMatrix - camera.projectionMatrix
- 统一mat4 viewMatrix - camera.matrixWorldInverse
- uniform mat3 normalMatrix - modelViewMatrix的逆转置 - 制服vec3 cameraPosition - 世界空间中的摄像机位置
- 属性vec3 位置 - 顶点位置
- 属性vec3 正常 - 顶点正常
- 属性vec2 uv
- 属性vec2 uv2

Answer 2

需要添加：

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

某些着色器需要在webgl上有这种类型的定义，而对于材质需要三个。

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
});

您需要有一个对象才能使用材质着色器。我没有用uv纹理测试 - 只是使用这个customMaterial。尝试使用x-shader / x-vertex，其他x-shader / x-fragment甚至可以使用x-shader / x-vertex和x-shader / x-vertex。

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

2 个答案: