Hi, the following example works if instead of using createShader()
in setup()
I use loadShader()
in preload()
, but I need to use createShader
because I need the shader code to be in the script file. Is there something I’m doing wrong? Why createShader
does not work with textures?
// this variable will hold our shader object
let theShader;
// this variable will hold our createGraphics layer
let shaderTexture;
let theta = 0;
let vert = `
attribute vec3 aPosition;
void main() {
vec4 positionVec4 = vec4(aPosition, 1.0);
positionVec4.xy = positionVec4.xy * 2.0 - 1.0;
gl_Position = positionVec4;
}
`;
let frag = `
void main() {
gl_FragColor = vec4(1.0, 0.5, 0.25, 1.0);
}
`;
let x;
let y;
let outsideRadius = 200;
let insideRadius = 100;
function preload(){
// load the shader
//theShader = loadShader('assets/texture.vert','assets/texture.frag');
}
function setup() {
// shaders require WEBGL mode to work
createCanvas(710, 400, WEBGL);
noStroke();
theShader = createShader(vert,frag);
// initialize the createGraphics layers
shaderTexture = createGraphics(710, 400, WEBGL);
// turn off the createGraphics layers stroke
shaderTexture.noStroke();
x = -50;
y = 0;
}
function draw() {
// instead of just setting the active shader we are passing it to the createGraphics layer
shaderTexture.shader(theShader);
// here we're using setUniform() to send our uniform values to the shader
theShader.setUniform("resolution", [width, height]);
theShader.setUniform("time", millis() / 1000.0);
theShader.setUniform("mouse", [mouseX, map(mouseY, 0, height, height, 0)]);
// passing the shaderTexture layer geometry to render on
shaderTexture.rect(0,0,width,height);
background(255);
Thanks