参考 p5.Shader

p5.Shader

A class to describe a shader program.

Each p5.Shader object contains a shader program that runs on the graphics processing unit (GPU). Shaders can process many pixels or vertices at the same time, making them fast for many graphics tasks. They’re written in a language called GLSL and run along with the rest of the code in a sketch.

A shader program consists of two files, a vertex shader and a fragment shader. The vertex shader affects where 3D geometry is drawn on the screen and the fragment shader affects color. Once the p5.Shader object is created, it can be used with the shader() function, as in shader(myShader).

Note: createShader(), createFilterShader(), and loadShader() are the recommended ways to create an instance of this class.

示例

语法

p5.Shader(renderer, vertSrc, fragSrc)

参数

renderer

WebGL context for this shader.

vertSrc

source code for the vertex shader program.

fragSrc

source code for the fragment shader program.

方法

copyToContext

Copies the shader from one drawing context to another.

Each p5.Shader object must be compiled by calling shader() before it can run. Compilation happens in a drawing context which is usually the main canvas or an instance of p5.Graphics. A shader can only be used in the context where it was compiled. The copyToContext() method compiles the shader again and copies it to another drawing context where it can be reused.

The parameter, context, is the drawing context where the shader will be used. The shader can be copied to an instance of p5.Graphics, as in myShader.copyToContext(pg). The shader can also be copied from a p5.Graphics object to the main canvas using the window variable, as in myShader.copyToContext(window).

Note: A p5.Shader object created with createShader(), createFilterShader(), or loadShader() can be used directly with a p5.Framebuffer object created with createFramebuffer(). Both objects have the same context as the main canvas.

setUniform

Sets the shader’s uniform (global) variables.

Shader programs run on the computer’s graphics processing unit (GPU). They live in part of the computer’s memory that’s completely separate from the sketch that runs them. Uniforms are global variables within a shader program. They provide a way to pass values from a sketch running on the CPU to a shader program running on the GPU.

The first parameter, uniformName, is a string with the uniform’s name. For the shader above, uniformName would be 'r'.

The second parameter, data, is the value that should be used to set the uniform. For example, calling myShader.setUniform('r', 0.5) would set the r uniform in the shader above to 0.5. data should match the uniform’s type. Numbers, strings, booleans, arrays, and many types of images can all be passed to a shader with setUniform().

Notice any errors or typos? Please let us know. Please feel free to edit src/webgl/p5.Shader.js and open a pull request!

相关参考