使用GLSL着色器的WebGL中的漸變顏色

Question

我的磁盤中間會有黑色，外面是漸變的。 第2部分是制作我的着色器的GLSL代碼，我的問題是當我這樣做時：“ gl_FragColor = vec4（vec3（vUv，0.17），1.）;”

`

varying vec2 vUv;

    void main()
    {
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 0.8);
    }

''

varying vec2 vUv;

void main()
{
    gl_FragColor = vec4( vec3( vUv, 0.17 ), 1. );
}

'

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 45, 1024 / 860, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer({ antialias: true});

camera.position.z = 30;
var my_shad = new THREE.ShaderMaterial({
vertexShader: document.getElementById( 'vertex' ).textContent,
fragmentShader: document.getElementById( 'frag' ).textContent
});

var radius = 8;
var segments = 80;
var circleGeometry = new THREE.CircleGeometry( radius, segments );              
var disk = new THREE.Mesh(circleGeometry, my_shad);
scene.add(disk);

renderer.setSize( 1024, 860 );
document.body.appendChild( renderer.domElement );

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

render(); 

'

Answer 1

嘗試為初學者做這樣的事情：

void main(){
float uvD = length(vUv);
vec3 gradient = mix(color1, color2, uvD);
gl_FragColor = vec4(gradient,1.);
}