Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

128
Views
How do I pass the canvas as a texture to a shader?

I want to manipulate the canvas with a shader, but I am stuck with how to pass the current canvas to the shader? I assume I use sampler2D. Why doesn't this code invert the canvas? Instead it's just a blank white screen.

image(cnvs) works perfectly fine.

script.js

let cnvs;
let shdr;

function preload() {
    shdr = loadShader("shaders/shader.vert", "shaders/shader.frag");
}
function setup() {
    cnvs = createCanvas(500, 500, WEBGL);
}

function draw() {
    fill(255, 0, 0);
    square(0, 0, width / 2);

    shdr.setUniform("u_resolution", [width, height]);
    shdr.setUniform("u_texture", cnvs);

    shader(shdr);
    fill(0);
    rect(0, 0, width, height);
    resetShader();
    noLoop();
}

shader.frag

#ifdef GL_ES

precision mediump float;

#endif

uniform vec2 u_resolution;
uniform sampler2D u_texture;

void main() {
    vec2 st = gl_FragCoord.xy / u_resolution.xy;
    st.y = 1.0 - st.y;

    vec4 tex = texture2D(u_texture, st);
    gl_FragColor = tex;
}

shader.vert

#ifdef GL_ES

precision mediump float;

#endif

attribute vec3 aPosition;

void main() {

  vec4 positionVec4 = vec4(aPosition, 1.0); // Copy the position data into a vec4, adding 1.0 as the w parameter

  positionVec4.xy = positionVec4.xy * 2.0 - 1.0; // Scale to make the output fit the canvas.

  gl_Position = positionVec4;
}
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!