2

По центру круг с градиентом от прозрачного к фиолетовому, но все объекты(серый фон) под кругом, что имеют transparent: true, становятся тоже прозрачными:

введите сюда описание изображения

Материал

new THREE.ShaderMaterial( {
  uniforms: {
    u_color: { value: new THREE.Color(0xCC00AB) },
    u_radius: { value: 350 },
  },
  vertexShader: shaders.vertex,
  fragmentShader: shaders.fragment,
  transparent: true
}};

Vertex:

varying vec3 v_position;

void main() {

    vec4 modelViewPosition= modelViewMatrix * vec4(position, 1.0);
    gl_Position = projectionMatrix * modelViewPosition;

    v_position = position;

}

Fragment:

uniform vec3 u_color;
uniform vec2 u_center;
uniform float u_radius;

varying vec4 v_position;

void main(){

    float a = abs( v_position.x ) / u_radius;
    float b = abs( v_position.y ) / u_radius;

    float opacity = 1.0 - sqrt( pow(a, 2.0) + pow(b, 2.0) ) - 0.1;

    gl_FragColor = vec4(u_color, opacity);
}
4
  • Переделал. Сначала идут линии не прозрачный над ними серый фон с прозрачностью над ним идет наш градиент, и наш серый фон исчезает в том месте где выводится наш верхний градиент 17 июл 2018 в 5:54
  • Оно и без шейдеров будет работать точно так же, скорее всего. Тут вот похожий вопрос: stackoverflow.com/q/11165345/4045502 . А что, если использовать шейдер на плоскости? Что бы радиальный градиент от фиолетового к серому был сразу там. 17 июл 2018 в 6:54
  • @prisoner849 Спасибо) ссылка помогла 17 июл 2018 в 7:59
  • Да не за что :) 17 июл 2018 в 8:14

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.