Skip to content

Instantly share code, notes, and snippets.

@haolly
Created May 3, 2018 02:49
Show Gist options
  • Save haolly/02de6dc530f00343a725fe39852a0f3d to your computer and use it in GitHub Desktop.
Save haolly/02de6dc530f00343a725fe39852a0f3d to your computer and use it in GitHub Desktop.
var myColor0 = new THREE.Color(0xff0000);
var myColor1 = new THREE.Color(0x00ff00)
var cube = new THREE.Mesh(
new THREE.BoxGeometry(1,1,1),
new THREE.ShaderMaterial({
uniforms: {
fade: { type: 'f', value: 0 },
myColor0: {value : myColor0},
myColor1: {value : myColor1}
},
vertexShader: `
// Define the uv we want to pass to our fragment shader
varying vec2 vUv;
void main(){
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
`,
fragmentShader: `
// Read our uv and textures, as well as fade value
// uniform sampler2D texture1;
// uniform sampler2D texture2;
uniform vec4 myColor0;
uniform vec4 myColor1;
uniform float fade;
varying vec2 vUv;
void main(){
// Read our pixel colors as rgba
//vec4 t1 = texture2D( texture1, vUv );
//vec4 t2 = texture2D( texture2, vUv );
// Mix our pixels together based on fade value
//gl_FragColor = mix( t1, t2, fade );
gl_FragColor = mix( myColor0, myColor1, fade );
}
`
})
);
scene.add( cube );
@haolly
Copy link
Author

haolly commented May 3, 2018

the error is :

Failed to execute 'uniform4fv' on 'WebGLRenderingContext': No function was found that matched the signature provided.

@jasperlinsen
Copy link

A THREE.Color is a vec3 so you need to convert those to vec4:

uniform vec3 myColor0;
uniform vec3 myColor1;
uniform float fade;

function main(){

    vec4 c1 = vec4( myColor0, 1.0 );
    vec4 c2 = vec4( myColor1, 1.0 );
		
    gl_FragColor = mix( c1, c2, fade );

}

You do this by calling the vec4 function and passing in the vec3 and the missing number (in this case the alpha 1). However, since you keep passing the fade in, why not just color.lerp in your code instead of the shader? This is far less error prone and you can use any of the standard built-in materials in that case.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment