착색기 소개 - 앞말

보도자료 Frontend Horse의 1기입니다.이 책은 최초로 2020년 7월 16일에 출판되었다.구독 Frontend.Horse 에 액세스하고 더 많은 질문을 찾습니다.
안녕하세요, 순종 네트워크 개발 통신에 오신 것을 환영합니다!
이번 주에 우리는 특별한 프로그램이 있다.amazingilithya과의 합작을 통해 착색기를 소개합니다!
착색기는 전단 개발자에게 일종의 슈퍼 능력이기 때문에 그것들이 무엇인지, 그리고 어떻게 일을 하는지 대체적으로 이해하는 것이 가장 좋다.이것이 바로 이 문제의 골칫거리다.
이것은 일부 주요 착색기 개념에 대한 개술이며, 광범위한 착색기에 대한 온화한 소개로 삼을 것이다.만약 당신이 이미 약간의 착색기 경험이 있다면, 이것은 당신이 이해를 공고히 하는 데 도움을 줄 수 있습니다.
앞으로 1기에서 우리는 무서운 착색기ilithya makes on CodePen를 깊이 연구할 것이니 세심한 관심을 기울여 주십시오.
착색기를 탐색하고 알아보자!

개념 착색기 소개

만약 우리가 즉시 코드에 뛰어들면, 착색기는 약간의 기세를 막을 수 없다고 느낄 것이다.반대로 은유를 사용하여 색기에 대한 고급 이해를 얻자.

픽셀 교실

픽셀 학생으로 구성된 교실을 상상해 봅시다.실제 스크린은 수천 픽셀을 수용할 수 있지만, 간단하게 말하자면, 이 교실에는 16개의 픽셀만 우리의 스크린을 대표한다.학생들의 책상은 4줄 4열로 늘어섰다.

각 픽셀은 색상을 확인하기 위해 음영처리기 테스트를 수행해야 합니다.어떤 좋은 학교처럼 부정행위를 하지 않았다!모든 픽셀은 같은 테스트를 가지고 있기 때문에 반드시 스스로 완성해야 한다.모든 사람은 같은 시간에 테스트에 참가하고 같은 시간에 답안의 색깔을 변경한다.
따라서 만약에 우리가 진실한 분홍색 착색기를 만들고 싶다면, 우리는 모든 사람에게 분홍색으로 돌아가는 테스트를 할 것이다.

모든 학생들은 동적 값이 없기 때문에 같은 답을 얻는다.모두 하드코딩입니다.
그럼 저희는 사다리를 어떻게 할까요?
우리는 학생들에게 약간의 다른 테스트를 통해 경도 인코딩을 할 수 없다.기억해라: 모든 학생들은 같은 테스트를 받을 것이다.
그러나, 우리의pixel 학생들은 그들이 교실에 있는 위치를 알고 있으며, 우리는 테스트에서 그들의 열과 행 번호를 참고할 수 있다.테스트에서 분홍색의 불투명도를 3으로 나누어 열로 설정하라고 알려주면 열로 나누어 주는 학생은 다음과 같이 됩니다.0 ,0.33 ,0.66 ,
및 1.0.
불투명하게 설정하면 교실이 흰색에서 분홍색으로 바뀝니다. 아래와 같습니다.

이 픽셀 교실은 매우 간단하지만, 우리가 기본적인 착색기의 원리를 파악하는 데 도움이 된다.착색기 예술가는 픽셀 위치, 시간과 수학(예를 들어 정현파와 무작위 값) 등 요소를 사용하여 놀라운 시각적 효과를 만든다.
주의해야 할 것은 착색기가 애니메이션에 매우 유용하다는 것이다.우리의 픽셀 속도는 매우 빨라서 복잡하지 않으면 초당 60회 테스트(초당 60프레임)를 할 수 있다.
이제 우리는 현실로 넘어가 착색기가 무엇인지 배울 수 있는 은유가 생겼다.

그럼 착색기가 뭐예요?

음영처리기는 CPU가 아닌 컴퓨터 그래픽 처리 유닛(GPU)에서 실행되는 특수 프로그램입니다.착색기 프로그램은 모든 픽셀을 병렬적으로 호출하여 속도를 매우 빠르게 한다.이것은 우리 모두가 동시에 시험에 참가하는 교실이다.
그러나 이것은 문제를 가져왔다. 자바스크립트 함수와 다른 착색기를 설계해야 한다는 것이다.
만약 내가 자바스크립트로 픽셀 격자에 색을 칠하고 싶다면, 나는 이런 순환을 작성할 수 있다.

// Loop across each pixel and change one at a time
for (let i = 0; i < width; i++) {
  for (let j = 0; j < height; j++) {
    grid[i][j] = someColor;
  }
}

그러나 이것은 순환하는 순서에 따라 픽셀을 한 번에 바꾼다.이것은 마치 선생님이 한 번씩 우리 학생들에게 그들이 어떤 색깔을 보여야 하는지 알려주는 것과 같다.
색칠기를 사용하면 순환의 내부에만 접근할 수 있기 때문에 이것을 작성할 수 있습니다.

// function called for every pixel at the same time
void main() {
  COLOR = some_color;
}

착색기는 믿을 수 없는 다기능성을 가지고 있어 영화, 비디오 게임과 인터넷의 도형에 사용할 수 있다!the new Stripe site의 애니메이션 그래디언트?이것은 착색기다!

정점 및 세그먼트 착색기

정점 착색기와 세그먼트 착색기 두 가지 유형이 있습니다.비록 우리는 오늘 단편 착색기만 토론하지만, 그것들 사이의 차이를 간략하게 소개하는 것이 매우 도움이 된다.교점 음영처리기는 모양 교점을 변경하고 세그먼트 음영처리기는 모양 내의 픽셀을 변경합니다.
정점 착색기는 픽셀 교실의 모양을 정의하고 세그먼트 착색기는 내부 픽셀의 색을 제어합니다.

그림을 만드는 데는 두 가지가 필요하지만, 색에 초점을 맞추려면 정점 착색기가 매우 간단하다.
멋있어서 나는 착색기가 무엇인지 이해하기 시작했다. 나는 그것들이 매우 좋다는 것을 안다.착색기 전문가가 되는 것이 얼마나 어려운가?

착색기가 어려워요?

Ilithya는 착색기를 사용하기 시작하는 것은 어려울 수 있다고 설명했다.그것들은 자바스크립트가 아니라 C 스타일의 OpenGL 착색 언어 (GLSL) 로 작성되었다.그래, 사용자 정의 착색기를 만들려면 수학에 정통해야 한다고 그녀는 덧붙였다.
하지만 ilithya는 수학 학위나 C 공부 없이 착색기를 배우는 방법을 알려주었다.
다른 사람의 착색기를 조정하다.
당신이 알고 싶은 코드는 무엇이든지: 그것을 풀어 보세요.반복적인 실험을 통해 각 줄의 기능을 이해하다.그리고 네가 생각해 낼 때 댓글을 달아라.
간단한 음영처리 예제를 시작점으로 사용합니다.음영처리기에서 숫자를 찾아 변경하여 역할을 확인합니다.이것이 바로 ilithya가 어떻게 수치 게임을 시작하고 a+를 a-로 바꾸어 무슨 일이 일어날지 보는 것이다.
이제 우리는 착색기의 개념 개술을 소개했다.착색기 몇 개를 보고 가능한 상황을 봅시다.

셰이더 예

이것은 단지 웹에서 사용하는 착색기의 예일 뿐이다.나는 코드펜과 다른 유사한 사이트에서 "shader"를 검색해서 무엇이 있는지 보는 것을 건의한다.

ilithya

Mav Farm

Lea Rosema

Karim Maaloul

음영처리기 리소스

착색기의 책

Ilithya는 우리에게 착색기 자원의 성배를 지적했다: The Book of Shaders.작가는 너의 손을 잡고 너에게 기본적인 착색기의 작업 원리를 보여 주었다.예를 들어 빨간색과 노란색 물감을 주고 직접 섞으면 오렌지색을 발견할 수 있다.
이 사이트는 대량의 작업 코드 프레젠테이션을 가지고 있으며, 심지어는 효과를 바꾸기 위해 편집해야 할 코드 줄을 가리키기도 한다.그들은 심지어 매우 유용한 것introduction for those coming from JS도 가지고 있다.

사드토이

ShaderToy는 기본적으로 순전히 착색기에 사용되는 코드 펜이다.이곳에는 믿기 어려운 것들이 있으니 어찌할 바를 모르지 마라.착색기의 책부터 기초 지식을 배울 수 있지만 여기에서 볼 수 있다.
체크아웃ilithya’s site 및 her CodePen ->

안녕히 계세요.

자, 이번 주 훈련은 이만 마치겠습니다.같이 타줘서 고마워요.
따라와, 만약 네가 이것을 좋아한다면, 네가 친구와 공유하거나 트위터를 한다면, 나는 미친 듯이 기뻐할 것이다.
특히 이 글을 2주 동안 써줘서 고마워요!그것은 대량의 수정을 거쳐 그녀는 이 두 부분에 대량의 정보와 피드백을 제공했다.어떤 잘못도 나의 것이고, 어떤 총명한 것도 그녀의 통찰력이라고 가정해 보세요.이것은 거대한 합작이다. 나는 매우 고맙다.
이번 편은 이전 편과 매우 다르기 때문에 나는 너의 생각을 알고 싶다.너는 이 메일에 답장을 해서 나에게 알려줄 수 있다.나는 내가 얻은 모든 것을 읽는다.
이것은 우리가 말을 타고 일몰에 들어가는 부분이다.조심해야 돼.
당신의 이웃,
알렉스
만약 당신이 이 글을 좋아한다면, Frontend.Horse 구독을 클릭하세요!다음은 Dev에서 발표됩니다.