Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

130
Vistas
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
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda