Three.js,自定义着色器,填充png纹理并设置透明度?

弗拉特曼先生

任务是以红色为主的颜色更改纹理的颜色。我正在尝试执行此操作,但是我的纹理完全用红色填充了图片,请告诉我错误在哪里?

我不明白为什么我不能设置透明度

function vertexShader(){

    return `
        precision mediump float;   
        varying vec2 vUv;

    void main(){

        vUv = uv;
        
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0 );
    
    }
    `
}


function fragmentShader(){

    return `
        precision mediump float;


        varying vec2 vUv;
        uniform sampler2D u_texture;

        uniform float u_time;
        

        void main(){

            gl_FragColor = texture2D(u_texture, vUv);
            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);     
        }
    `
}

var texLoader = new THREE.TextureLoader();

var texture = texLoader.load("217.png");

const uniforms = {
    u_texture: {value: texture}
}


const material = new THREE.ShaderMaterial(
     {
        uniforms,
        vertexShader: vertexShader(),
        fragmentShader: fragmentShader(),
        side: THREE.DoubleSide,
        //wireframe: true
     }

 );
man

着色器设置gl_FragColor为红色

        gl_FragColor = texture2D(u_texture, vUv);  // this line is effectively ignored
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);   // because this line sets glFragColor

也许你是这个意思?

        gl_FragColor = texture2D(u_texture, vUv);  
        gl_FragColor += vec4(1.0, 0.0, 0.0, 1.0);  // add red

或这个?

        gl_FragColor = texture2D(u_texture, vUv);  
        gl_FragColor *= vec4(1.0, 0.0, 0.0, 1.0);  // multiply by red

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

WebGL / three.js片段着色器-用alpha透明色覆盖alpha透明纹理

来自分类Dev

Three.js的累积着色器

来自分类Dev

使用three.js将PointLight信息传递到自定义着色器

来自分类Dev

如何在THREE.js中将自定义着色器应用于Sprite

来自分类Dev

three.js淡入/淡出后期处理着色器

来自分类Dev

在THREE.JS中组合着色器

来自分类Dev

three.js透明纹理和着色器材质

来自分类Dev

着色器中的Three.js纹理

来自分类Dev

three.js:自定义几何不会纹理

来自分类Dev

在Three.js着色器中使用灯光

来自分类Dev

如何在着色器中为纹理添加雾(THREE.JS R76)

来自分类Dev

Three.JS-不同对象的不同着色器

来自分类Dev

A-Frame和Three.js的视频透明度

来自分类Dev

three.js-使用纹理图像遮罩透明度

来自分类Dev

Three.js片段着色器颜色过渡

来自分类Dev

three.js如何运行着色器程序

来自分类Dev

WebGL / three.js片段着色器-用alpha透明色覆盖alpha透明纹理

来自分类Dev

Three.JS-移植自定义顶点着色器

来自分类Dev

使用three.js将PointLight Info传递到自定义着色器

来自分类Dev

着色器中的Three.js纹理

来自分类Dev

THREE.js着色器的颜色纹理

来自分类Dev

自定义着色器不受Three.js中的雾影响

来自分类Dev

Three.js透明度模型纹理错误

来自分类Dev

Web着色器-three.js,需要修复吗?

来自分类Dev

Three.JS-不同对象的不同着色器

来自分类Dev

ThreeJS r82自定义着色器-three.min.js:137未捕获的TypeError:无法读取未定义的属性'getUniforms'

来自分类Dev

THREE.js中材料的不透明度

来自分类Dev

Three.js重叠透明PNG纹理有黑色背景

来自分类Dev

Chrome GL_INVALID_OPERATION 上的 Three.js 自定义着色器错误:缺少片段着色器输出的活动绘制缓冲区

Related 相关文章

热门标签

归档