如何使用 p5 着色器在特定位置绘制正方形？

Question

使用 p5.js 我有：

s.draw = () => {
    s.background(0);
    s.translate(-s.windowWidth / 2, -s.windowHeight / 2, 0);
    s.shader(shader);
    shader.setUniform("u_resolution", [s.width, s.height]);
    shader.setUniform('vPos', getSquarePoints(cols/2, rows/2));
    s.square(0, 0, cellSize);    
}

const getSquarePoints = (i, j) => {
        return new Float32Array([
            i, j,
            (i + cellSize), j,
            i, (j + cellSize),
            (i + cellSize), j,
            (i + cellSize), (j + cellSize),
            i, (j + cellSize),
        ])
    }

我的顶点：

#ifdef GL_ES
precision mediump float;
#endif

attribute vec3 aPosition;

varying vec2 vPos;

void main() {
    vec4 positionVec4 = vec4(aPosition, 1.0);

    positionVec4.xy = positionVec4.xy * 2.0 - 1.0;

    gl_Position = positionVec4;
}

片段：

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;

varying vec2 vPos;

void main() {

    vec2 st = gl_FragCoord.xy / u_resolution.xy;

    gl_FragColor = vec4(st.x, st.y, 0.0, 1.0);
}

所以 vPos 的类型错误，但我的计划是定义用 2 个三角形组成正方形所需的 6 个点并将这些点发送到位置缓冲区。

• 我该怎么做？
• 这甚至是“正确的方式”吗？

Answer 1

我对此的理解不足以提供适当的反馈，但由于没有更聪明的人回答，我会尝试。我确实使用以下过程得到了类似的工作：

1、在你的draw函数中创建一个图像对象：

let pixel_image = createImage(width, height);
pixel_image.loadPixels();

2，使用.set()填充图像的像素，i和j，应该来自一个循环并且是你想要覆盖的像素。

pixel_image.set(i, j, color(0, 90, 102));

3、更新图像像素

pixel_image.updatePixels();

Check out create image in p5.js from pixel locations on how to do these steps above fully

4、将图像保存到shader.frag文件中要拾取的变量中。我出于某种原因调用了变量 pixel_coords：

shader.setUniform('pixel_coords', pixel_image);

5、在shader.frag文件中你会看到传入的图片： uniform sampler2D pixel_coords;

check this out for the shader files image from p5 to shaders for more insight

着色器片段文件：

precision mediump float;
// we need our texcoords for drawing textures
varying vec2 vTexCoord;
// images are sent to the shader as a variable type called sampler2D
uniform sampler2D pixel_coords;
void main() {
  // by default, our texcoords will be upside down
  // lets flip them by inverting the y component
  vec2 uv = vTexCoord;
  uv.y = 1.0 - uv.y;
  // we can access our image by using the GLSL shader function texture2D()
  // texture2D expects a sampler2D, and texture coordinates as it's input
  vec4 image = texture2D(pixel_coords, uv);
  gl_FragColor = image;
}

着色器顶点文件

// our vertex data
attribute vec3 aPosition;
// our texcoordinates
attribute vec2 aTexCoord;
// this is a variable that will be shared with the fragment shader
// we will assign the attribute texcoords to the varying texcoords to move them from the vert shader to the frag shader
// it can be called whatever you want but often people prefix it with 'v' to indicate that it is a varying
varying vec2 vTexCoord;
void main() {
  // copy the texture coordinates
  vTexCoord = aTexCoord;
  // copy the position data into a vec4, using 1.0 as the w component
  vec4 positionVec4 = vec4(aPosition, 1.0);
  positionVec4.xy = positionVec4.xy * 2.0 - 1.0;
  // send the vertex information on to the fragment shader
  gl_Position = positionVec4;
}