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
String:
프래그먼트 셰이더의 소스 코드
Returns
p5.Shader: 프래그먼트 셰이더에서 생성된 새 셰이더 객체를 반환합니다.
Notice any errors or typos? Please let us know. Please feel free to edit src/webgl/material.js and open a pull request!