No functions in shaders?

Hey, I just have built a really simple program.

In the shaders I’m trying to mix tweo values together (using the mix() function).
When I run the program it says that there is no such function. Can anyone help me with that? Have I done something wrong…?

Thank your for your help :slight_smile:

Vertex Shader:

void main()
{
	gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

Fragment Shader:

uniform vec4 color;
uniform vec4 ambientColor;

void main()
{
	gl_FragColor = mix(gl_FragColor, ambientColor, 1);
}

Javascript:

var scene = new THREE.Scene();
	var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

	var renderer = new THREE.WebGLRenderer({ antialias: true});
	renderer.setSize(window.innerWidth, window.innerHeight);
	document.body.appendChild(renderer.domElement);
	
	var coneUniforms =
	{
		color: new THREE.Uniform(new THREE.Vector4(0, 1, 1, 1)),
		ambientColor: new THREE.Uniform(new THREE.Vector4(0.3, 0.3, 0.3, 1.0))
	};
	
	
	var geometry = new THREE.ConeGeometry(1, 1.5, 4);
	var material = new THREE.ShaderMaterial(
	{ 
		vertexShader: document.getElementById("vertexShader").textContent,
		fragmentShader: document.getElementById("fragmentShader").textContent,
		uniforms: coneUniforms
	});
	
	//material.vertexColors;
	
	var pyramide = new THREE.Mesh(geometry, material);
	scene.add(pyramide);

	/************
	* FUNCTIONS *
	************/
	
	var initialise = function()
	{
		camera.position.z = 3;
	}

	var render = function()
	{
		requestAnimationFrame(render);
		
		update();

		renderer.render(scene, camera);
	};
	
	var update = function()
	{
		pyramide.rotation.y += 0.01;
	}
	
	/**********
	* PROGRAM *
	**********/
	
	initialise();
	render();

The error I’m getting from the console:

THREE.WebGLShader: gl.getShaderInfoLog() fragment ERROR: 0:108: ‘mix’ : no matching overloaded function found
ERROR: 0:108: ‘assign’ : cannot convert from ‘const float’ to 'FragColor mediump 4-component vector of float’
1: precision highp float;
2: precision highp int;
3: #define SHADER_NAME ShaderMaterial
4: #define GAMMA_FACTOR 2
5: #define NUM_CLIPPING_PLANES 0
6: #define UNION_CLIPPING_PLANES 0
7: uniform mat4 viewMatrix;
8: uniform vec3 cameraPosition;
9: #define TONE_MAPPING
10: #define saturate(a) clamp( a, 0.0, 1.0 )
11: uniform float toneMappingExposure;
12: uniform float toneMappingWhitePoint;
13: vec3 LinearToneMapping( vec3 color ) {
14: return toneMappingExposure * color;
15: }
16: vec3 ReinhardToneMapping( vec3 color ) {
17: color *= toneMappingExposure;
18: return saturate( color / ( vec3( 1.0 ) + color ) );
19: }
20: #define Uncharted2Helper( x ) max( ( ( x * ( 0.15 * x + 0.10 * 0.50 ) + 0.20 * 0.02 ) / ( x * ( 0.15 * x + 0.50 ) + 0.20 * 0.30 ) ) - 0.02 / 0.30, vec3( 0.0 ) )
21: vec3 Uncharted2ToneMapping( vec3 color ) {
22: color *= toneMappingExposure;
23: return saturate( Uncharted2Helper( color ) / Uncharted2Helper( vec3( toneMappingWhitePoint ) ) );
24: }
25: vec3 OptimizedCineonToneMapping( vec3 color ) {
26: color = toneMappingExposure;
27: color = max( vec3( 0.0 ), color - 0.004 );
28: return pow( ( color * ( 6.2 * color + 0.5 ) ) / ( color * ( 6.2 * color + 1.7 ) + 0.06 ), vec3( 2.2 ) );
29: }
30:
31: vec3 toneMapping( vec3 color ) { return LinearToneMapping( color ); }
32:
33: vec4 LinearToLinear( in vec4 value ) {
34: return value;
35: }
36: vec4 GammaToLinear( in vec4 value, in float gammaFactor ) {
37: return vec4( pow( value.xyz, vec3( gammaFactor ) ), value.w );
38: }
39: vec4 LinearToGamma( in vec4 value, in float gammaFactor ) {
40: return vec4( pow( value.xyz, vec3( 1.0 / gammaFactor ) ), value.w );
41: }
42: vec4 sRGBToLinear( in vec4 value ) {
43: return vec4( mix( pow( value.rgb * 0.9478672986 + vec3( 0.0521327014 ), vec3( 2.4 ) ), value.rgb * 0.0773993808, vec3( lessThanEqual( value.rgb, vec3( 0.04045 ) ) ) ), value.w );
44: }
45: vec4 LinearTosRGB( in vec4 value ) {
46: return vec4( mix( pow( value.rgb, vec3( 0.41666 ) ) * 1.055 - vec3( 0.055 ), value.rgb * 12.92, vec3( lessThanEqual( value.rgb, vec3( 0.0031308 ) ) ) ), value.w );
47: }
48: vec4 RGBEToLinear( in vec4 value ) {
49: return vec4( value.rgb * exp2( value.a * 255.0 - 128.0 ), 1.0 );
50: }
51: vec4 LinearToRGBE( in vec4 value ) {
52: float maxComponent = max( max( value.r, value.g ), value.b );
53: float fExp = clamp( ceil( log2( maxComponent ) ), -128.0, 127.0 );
54: return vec4( value.rgb / exp2( fExp ), ( fExp + 128.0 ) / 255.0 );
55: }
56: vec4 RGBMToLinear( in vec4 value, in float maxRange ) {
57: return vec4( value.xyz * value.w * maxRange, 1.0 );
58: }
59: vec4 LinearToRGBM( in vec4 value, in float maxRange ) {
60: float maxRGB = max( value.x, max( value.g, value.b ) );
61: float M = clamp( maxRGB / maxRange, 0.0, 1.0 );
62: M = ceil( M * 255.0 ) / 255.0;
63: return vec4( value.rgb / ( M * maxRange ), M );
64: }
65: vec4 RGBDToLinear( in vec4 value, in float maxRange ) {
66: return vec4( value.rgb * ( ( maxRange / 255.0 ) / value.a ), 1.0 );
67: }
68: vec4 LinearToRGBD( in vec4 value, in float maxRange ) {
69: float maxRGB = max( value.x, max( value.g, value.b ) );
70: float D = max( maxRange / maxRGB, 1.0 );
71: D = min( floor( D ) / 255.0, 1.0 );
72: return vec4( value.rgb * ( D * ( 255.0 / maxRange ) ), D );
73: }
74: const mat3 cLogLuvM = mat3( 0.2209, 0.3390, 0.4184, 0.1138, 0.6780, 0.7319, 0.0102, 0.1130, 0.2969 );
75: vec4 LinearToLogLuv( in vec4 value ) {
76: vec3 Xp_Y_XYZp = value.rgb * cLogLuvM;
77: Xp_Y_XYZp = max(Xp_Y_XYZp, vec3(1e-6, 1e-6, 1e-6));
78: vec4 vResult;
79: vResult.xy = Xp_Y_XYZp.xy / Xp_Y_XYZp.z;
80: float Le = 2.0 * log2(Xp_Y_XYZp.y) + 127.0;
81: vResult.w = fract(Le);
82: vResult.z = (Le - (floor(vResult.w
255.0))/255.0)/255.0;
83: return vResult;
84: }
85: const mat3 cLogLuvInverseM = mat3( 6.0014, -2.7008, -1.7996, -1.3320, 3.1029, -5.7721, 0.3008, -1.0882, 5.6268 );
86: vec4 LogLuvToLinear( in vec4 value ) {
87: float Le = value.z * 255.0 + value.w;
88: vec3 Xp_Y_XYZp;
89: Xp_Y_XYZp.y = exp2((Le - 127.0) / 2.0);
90: Xp_Y_XYZp.z = Xp_Y_XYZp.y / value.y;
91: Xp_Y_XYZp.x = value.x * Xp_Y_XYZp.z;
92: vec3 vRGB = Xp_Y_XYZp.rgb * cLogLuvInverseM;
93: return vec4( max(vRGB, 0.0), 1.0 );
94: }
95:
96: vec4 mapTexelToLinear( vec4 value ) { return LinearToLinear( value ); }
97: vec4 envMapTexelToLinear( vec4 value ) { return LinearToLinear( value ); }
98: vec4 emissiveMapTexelToLinear( vec4 value ) { return LinearToLinear( value ); }
99: vec4 linearToOutputTexel( vec4 value ) { return LinearToLinear( value ); }
100:
101:
102:
103: uniform vec4 color;
104: uniform vec4 ambientColor;
105:
106: void main()
107: {
108: gl_FragColor = mix(gl_FragColor, ambientColor, 1);
109: }
110:

Try this:

gl_FragColor = mix(gl_FragColor, ambientColor, 1.0);

The last paramter of mix specifies the value to use to interpolate between both colors. It must be a floating-point number.

Worked :smiley:

Okay sorry for the dumb question but I thought I already tried that^^