Uniforms and interactions
It is fair to say that no web applications is really complete without interactions. Uniform variables in shaders provide the bridge necessary between the JavaScript and the GLSL shaders. Uniforms are variables that are uniformly defined for all geometric primitives and fragments (pixels) in the shaders. They uniform variables need to be declared with the "uniform" keyword proceeded by their type as global variables outside any function definition including the main() function in the shaders.
We continue with editing the code from the previous example. To define the constant \(c_0\) with a polar coordinate representation of the complex number, we intend to send two numbers radius and theta to handle the following representation:
\[ c_0 = r\cos(\theta) + i \sin(\theta). \]
We need to add the following line to the interface section of the fragment shader.
uniform float radius,theta ;
This will define two float variables, radius and theta, as uniform variables.
We also modify the line where c0 is initialized to
vec2 c0 = radius*vec2(cos(theta),sin(theta)) ;
Notice how we multiplied a scalar by a vector to define c0. These are the only changes to the fragment shader. Therefore, the fragment shader code will be implemented as follows.
#version 300 es
precision highp float ;
precision highp int ;
uniform float radius, theta ; /* Defining two uniform float variables
to introduce interaction between the
JavaScript and the fragment shader
codes */
out vec4 outcolor ; /* output of the shader
pixel color */
in vec2 cc ; /* input from vertex shader */
#define csqr(z) vec2((z).x*(z).x-(z).y*(z).y,2.*(z).x*(z).y)
// Main body of the shader
void main() {
vec2 z = cc*4. - vec2(2.,2.) ; /* Initial coordinate based
on pixel position */
vec2 c0 = radius*vec2(cos(theta),sin(theta)) ; /* the constant c0 */
float iter ;
/* Iteration loop to march the iterative map for a 1000 times */
for(int i=0; i<1000; i++){
iter = float(i) ;
/* the Julia map */
z = csqr(z) + c0 ;
if (length(z)>2.){ /* if the point is not part of the set
break the loop */
break ;
}
}
// Output the result in the red channel of the output
outcolor = vec4(iter - log(log(length(z)))/log(2.),0.,0.,0.) ;
return ;
}
If we don't pass any variables to setup uniforms from the JavaScript code, they will be assumed zero. So, if you run the code now, you will get this:
We are going to use the graphical interface design tools that are included with Abubu.js. They require the variables for the interface to be included in an object. So, we define the following object in our main <script> tag.
var env = {
r : 0.9, // radius
th: Math.PI, // theta
} ;
Now, we need to pass these values in our solver definition. We will modify our solver definition to
var julia = new Abubu.Solver( {
fragmentShader : source('fshader'),
/* uniforms will be passed here */
uniforms : {
radius : { type : 'f', value : env.r } ,
theta : { type : 'f', value : env.th } ,
} ,
/* targets or render targets are the output/outputs of the
solver. */
targets : {
outcolor : { location :0, target : result_texture }
}
} ) ;
In the uniforms section, we need to pass an object. Each member of the object has the name of the variable in the shader as the member name, and then we set it as on object which has a type and value. The type is set as an string where 'f' represents a float, 'i' an integer, 'b' a boolean, etc. The value property is the value which we want to send to the GPU to be used in the solver.
Now, if we re-run our code we should get
We can now define a function to create the graphical user interface. The function will be:
function createGui(){
var gui = new Abubu.Gui() ; /* create a graphical user
interface */
var panel = gui.addPanel() ; /* add a panel to the GUI */
panel.add( env, 'r' )
.step(0.01) /* the increment to change env.r */
.onChange(function(){ /* the function to run when the value
of env.r is changed */
/* update the value of radius uniform by the new value of
env.r */
julia.uniforms.radius.value = env.r ;
/* solve the julia set with the new values and visualize the
result */
solveAndVisualize() ;
} ) ;
panel.add( env, 'th' )
.step(0.01) /* the increment to change env.th */
.onChange(function(){ /* the function to run when the value
of env.th is changed */
/* update the value of theta uniform by the new value of
env.th */
julia.uniforms.theta.value = env.th ;
/* solve the julia set with the new values and visualize the
result */
solveAndVisualize() ;
} ) ;
}
The comments should be easy to follow and understand. The function addPanel forks the library dat.GUI. You can find a good tutorial on dat.GUI here. You can also use any other method or library that you prefer to implement interactions in the code.
Now, the last thing we need to do is to call this function at the end of the <script> tag by just typing createGui(). Run your code and try to change the values of r and th in the graphical user interface.
The result should look like this.
