레퍼런스 createFilterShader()

createFilterShader()

p5.Shader 객체를 생성하여 filter() 함수와 함께 사용합니다.

createFilterShader() 함수는 createShader() 처럼 동작하지만 기본 정점 셰이더(vertex shader)가 포함되어 있습니다. createFilterShader() 함수는 캔버스의 내용을 필터링하기 위해 filter() 함수와 함께 사용하도록 의도되었습니다. 필터 셰이더는 p5.Geometry 객체뿐만 아니라 전체 캔버스에 적용됩니다.

매개변수인 fragSrc는 프래그먼트 셰이더(fragment shader)를 설정합니다. 이것은 GLSL로 작성된 프래그먼트 셰이더 프로그램이 포함된 문자열입니다.

p5.Shader 객체에는 다음과 같은 유니폼(uniform)이 설정됩니다:

  • sampler2D tex0는 텍스처로 캔버스 내용을 포함합니다.
  • vec2 canvasSize는 캔버스의 너비와 높이(height)를 포함하며 픽셀 밀도(density)를 포함하지 않습니다.
  • vec2 texelSize는 픽셀 밀도를 포함한 물리적 픽셀의 크기입니다. 이것은 픽셀 너비(width)에 대해 1.0 / (width * density)로 계산되며 픽셀 높이에 대해 1.0 / (height * density)로 계산됩니다.

생성된 p5.Shader는 또한 0과 1 사이의 값을 가진 좌표인 varying vec2 vTexCoord를 제공합니다. vTexCoord는 픽셀이 그려질 캔버스의 위치를 설명합니다.

필터와 셰이더에 대한 자세한 정보는 Adam Ferriss의 셰이더 예제 저장소셰이더 소개 튜토리얼을 참조하십시오.

예제

구문

createFilterShader(fragSrc)

매개변수

fragSrc

프래그먼트 셰이더의 소스 코드

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

관련 레퍼런스