# GLSL

designc

오늘은 드디어 orthographic camera를 이용한 포트폴리오의 간단한 세팅을 통해 threejs와 한 층 더 친숙해지는 시간을 가져볼 생각이다. 바로 코딩에 착수하는 것이 아니라, 기본적으로 어떠한 구조로 만들 것인지, 또한 중요하게 공부할 만한 포인트는 어떤 것이 있는지에 대해 간단히 알아보는 시간이 될 것이다. 초기 세팅 우선, 앞선 시리즈인 threejs 코드편 시리즈에서 배웠던 대로 초기 세팅을 해보자 원하는 디렉터리 위치로 이동 후, 터미널을 열고, 라고 입력해주자. 프로젝트 초기 세팅은 앞의 시리즈에도 겹치는 내용이 많으니, 혹시라도 이해가 가지 않는다면 아래 링크를 클릭하여 읽고 오는 것을 추천한다. (천천히 정독하면, 7분 정도 소요 예상) <a href="https

designc

오늘은 카카오에서 얼마 전(좀 오래 전)선보였던 '춘식이 관찰일기'와 비슷한 각도에서 내려다보는 Orthogonal Camera를 이용한 간단한 포트폴리오 페이지를 만들어보려 한다. 필자도 현재 개발중이나, 완성된 페이지는 대략 아래와 같은 모습이 될 것이다. 포트폴리오 페이지 구현에 필요한 최소 기술 스택 >- #### Vite >- #### HTML >- #### CSS >- #### Javascript >- #### Typescript >- #### React >- #### Threejs >- #### React-Three-Fiber >- #### (기술 스택은 아니지만)Netlify를 비롯한 배

designc

코드편 3탄에서는 light(조명), shadow(그림자), material의 빛과 관련된 속성에 대해서 알아보도록 하겠다. 이번에도 역시, 같은 코드를 vanila javascript와 react 두 가지 방식으로 모두 작성해보겠다. vanila javascript three Light의 효과를 알기 위해선 우선, mesh의 material을 MeshStandardMaterial로 바꾸고, 가장 기본적인 조명인 AmbientLight를 추가해보자. 또한, 2탄에서 작성했던 애니메이션 관련 코드는 잠시 주석처리 해주자. ambientLight를 추가했더니, 사실 meshBasicMaterial과 큰 차이가 없어보인다. 빛이 있다면 항상 존재하는 그림자가 생기지 않고, 어디에서든 같은 밝기를 제공하기 때문이다. 이번에는 그림자를 만들어 보도록 하겠다. 그러기 위해서는 그림자가 생길

designc

1탄에서는 threejs에서 간단하게 mesh를 띄워보는 시간을 가졌다. 2탄에서는 camera를 좀 더 자연스럽게 다루는 방법과, 화면 비율이 바뀌었을 때에 대한 처리 등, 1탄에서 어색했던 문제를 해결해보는 시간을 가져볼까 한다. 2탄 역시, vanila javascript와 react 두 곳에서의 코드를 모두 작성해 볼 예정이다. vanila javascript three 먼저, 이전에 작업했던 velog-threejs-vanila 코드를 실행시키고, 브라우저를 연 뒤, 브라우저의 크기를 변경시켜보자. 캔버스의 위치는 그대로 있고, 전체 창 크기만 변화하는 것이 조금 어색하게 느껴진다. 이 문제를 해결해 보도록 하자. 다음은, 카메라의 앵글을 수정할 때, 매번 하드코딩을 통해 바꾸는 것은 매우 번거롭기에, 카메라를 자유자재로 다룰 수 있는 방법에 대해 알아보자. 추가로, 위에서 작

designc

그닥 알차진 않았던 개념편 작성이 끝이 났다. 개념편은 정말 threejs를 처음 접했거나, 공식문서를 제대로 읽어보기 귀찮은 사람이 저 글만 보고도 대충은 이해하길 바라는 마음 + 그냥 내가 스스로 복습해보는 마음 위 두 가지 마음을 반반씩 갖고 작성했다. 코드편 에서는... 앞에서 이해한 개념을 바탕으로 기본적인 threejs의 사용법을 알아보는 시간을 가져보려 한다. 먼저, Vanila Javascript에서 해당 코드를 작성해보고, 같은 코드를, React에서 사용 가능한 형태로도 작성해보도록 하겠다. (단, 이 경우에는 Typescript를 이용하여 작성해보도록 하겠다.) 코드 작성에 앞서, 개념편에서 기억해야 할 threejs의 7요소를 상기해보자. scene, camera, renderer, mesh, geometry, material,

designc

앞선 2탄에서는 1탄에 이어, 조금은 고급화된 촬영 기술에 대하여 공부했다. 3탄에서는, 나무 블럭 말고도 다양한 형태의 촬영 객체에 대해 알아보고, 움직이는 객체에 대한 촬영기법에 대해서도 알아보겠다. 7가지(scene, camera, renderer, mesh, geometry, material, light)중 geometry에 포함되는 다양한 종류를 알아보도록 하자. Geometry 주변을 둘러보자. 주변에는 주사위처럼 육면체 모양의 물건도 있지만, 공처럼 동그란 물건도 있을테고, 이 둘로는 설명이 안되는 다양한 형태의 물건이 있을 것이다. Threejs의 세계에서도, 이에 대응하는 geometry들이 존재한다. 그 종류를 알아보도록 하자. 단. 그 종류가 매우 다양하므로, 필자가 개인적으로 자주 사용하는 geometry와 그 외 몇 개를 소개하였다. 사실 이 부분은 공식문서만 보아도 제대로 이해할 수 있을 것이다.

designc

앞선 1탄에서는, 정말 기본적인 threejs의 요소에 대해 알아보았다. 2탄에서는, 비유하자면 고급 촬영 기술에 대해 이해한대로 기술하고자 한다. 사실 이 6가지(scene, camera, renderer, mesh, geometry, material)말고도, 아직 설명하지 않은 중요한 요소가 한 개 더 있다. Camera 지금 휴대폰의 카메라 앱을 실행해보자. 눈 앞에 있는 키보드를 사진찍는다고 했을 때, 사진 속에 예쁘게 담기게 하려면 키보드와 '적절한 거리' 를 유지해야 할 것이며, 너무 과하지 않은 '각도(시야각)'으로 촬영해야 할 것 이다. 또한, 핸드폰을 가로로 들고 찍느냐, 세로로 들고 찍느냐에 따라서도, 가로 세로 '비율'이 다르기에 결과물이 아주 다르게 나올 것이다. >- fov : field

designc

작년 중순, 현재 회사에 입사 후, 3D WebGL 관련 프로젝트에 참여하게 되었다. 라이브러리 자체의 사용법도 생소했지만, 무엇보다 그래픽스 관련 수학 공부(선형대수학, 기하학 등)를 병행해야 하는 점이 까다로웠다. 이 게시글은 threejs를 처음 접했던 몇 달 전의 나로부터, 지금 이 글을 작성하고 있는 현재의 나에 이르도록 이 라이브러리에 대해 이해한대로 작성할 예정이다. 최대한 기술적인 용어를 자제하고, 비유적 표현을 이용하여 작성하였다. Threejs는? 웹에서 3D 객체를 쉽게 다룰 수 있게 해주는 라이브러리이다. 정확한 설명은 자바스크립트 언어로 구현된 WebGL(Web Graphcis Library)이다. threejs가 궁금하다면, 하단의 링크를 눌러 공식문서를 다녀와 보도록하자. <a href='https://threejs.org/docs/index.html#manual/en/introduction/C

pixgram

webgl작업을 하다보면 만나는 msdf폰트에 대해 알아보자. 왜 이런 기술이 나왔을까? 우선 glsl에서는 그냥 쌩으로 폰트를 읽어 올 수 없다. 그래서 폰트를 이미지화 해서 가져와야 하는데, 사용되는 폰트의 크기는 다양할것이다. 사이즈별로 폰트를 이미지화 할 경우 각각의 크기별로 폰트의 이미지를 만들어야 하는데 이러면 비 효율적일것이다. 그래서 이 msdf라는 기술이 등장했다. msdf는 Multi-channel Signed Distance Fields 의 약자로 가장자리 부터의 거리의 정보를 3개 이상의 컬러 채널로 표현한 것이다. 그래서 두개의 채널이 겹치는 부분을 그려줌으로서 확대를 해도 선명함을 얻을 수 있는 것이다.

pixgram

three.js에서 post processing을 사용하면 하나의 pass를 통해서 효과가 부여된 이미지가 전달된다. 위와 같이 pass를 통해 다음 pass로 전달이 되는데 이때 사용되는 이름이 'tDiffuse'이다. tDiffuse의 값을 null로 한다는 것은 이전 단계의 효과가 적용된 데이터를 사용하지 않겠다는 것이다. 즉, fragmentShader에서 null로 된 tDiffuse를 사용하면 renderPass에서 넘어오는 원본 데이터를 사용하는것이다.

pixgram

밉맵 폴리곤이 실제로 화면에 그려지는 크기에 맞추어 텍스처를 교체하는 기법. 다른 해상도의 텍스처를 공통된 uv좌표로 다룰 수 있게 하려고 실제 텍스처 이미지 크기를 따르지 않고 좌표로 지정한다.

zkzkshsh

smoothstep 색을 부드럽게 그라데이션을 만들어주는 함수예요!! smoothstep(min, max, x); 24번째 줄에서 (1.0 - pct)를 해주는 이유는 색을 보간하기 위해서 있는 것 같더라구요. > 보간하지 않았을 때, 기준이예요!! > 보간했을 때, 기준이예요!! 19번째 줄에서 pow 외에도 exp(),

parksj3205

이번 장에서는 정말로 윈도우에 삼각형을 그려볼 것입니다. 이전 장의 렌더링 파이프라인에서 버텍스 셰이더와 프래그먼트 셰이더는 프로그래밍이 가능하다고 했습니다. 바로 이 셰이더들을 활용하여 윈도우에 삼각형을 그릴 것입니다. 물론 원래는 버텍스 셰이더의 이전 단계인 버텍스 버퍼, 버텍스 어레이 단계에서 삼각형의 좌표나 색상 정보들을 설정하여 렌더링 파이프라인에 보낸 다음, 그 정보를 버텍스 셰이더가 넘겨 받아 필요한 작업을 수행하는 것이 맞습니다. 하지만 버텍스 버퍼, 버텍스 어레이 단계를 잠시 건너뛰고 직접 버텍스 셰이더에 삼각형의 좌표를 설정하여 보다 간단하게 삼각형을 그려보겠습니다. 셰이더 생성 먼저 셰이더를 다루기 위해서 Shader 클래스를 만듭니다. Shader 클래스의 생성자는 파라미터로 셰이더의 경로를 받습니다. 그리고 생성자에서 createGraphicsPipeline 멤버함수를 호출합니다. createGraphicsPipeline 멤버함수에서 셰

iepppop

glsl openGL Shading Language 셰이더라고 부름 > yarn add babel-plugin-glsl glsl은 유니폼, 정점 셰이더, 프래그먼트 셰이더로 나뉨 유니폼(uniform) 자바스크립트에서 셰이더로 데이터를 보내는 방법을 제공. 정점 셰이더(Vector Shader) 먼저 실행되는 셰이더. 속성을 수신하고 각 개별 정점의 위치 조작. 도형의 정점 배치하며 모양 생성. 프레그먼트 셰이더(Fragment Shader) 정점 셰이더 다음으로 동작. 개별 조각이나 픽셀 색상 설정. gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 는 기본 값이다. 중간에 놓아준다. `gl_FragColo

parksj3205

Lighthouse3d.com의 GLSL tutorial 번역입니다. 프레그먼트 셰이더는 프레그먼트를 처리합니다. 기본적으로 프레그먼트는 이전 단계에서 보간된 모든 데이터가 포함된 윈도우 상의 위치(X, Y)와 깊이값(Z)입니다. 레스터라이제이션 단계를 통해 생성되고 보간 단계에서 속성이 계산된 프레그먼트는 이제 프레그먼트 셰이더로 하나씩 입력됩니다. 트렌스폼 피드백이 사용되지 않는 한 이 셰이더는 선택사항이 아닙니다. 프레그먼트 셰이더는 프레그먼트 위치와 레스터라이제이션 단계에서 보간된 모든 데이터에 접근할 수 있습니다. 셰이더는 속성과 픽셀 위치에 따라서 계산을 수행합니다. 픽셀의 X, Y 위치는 고정됩니다. 즉, 프레그먼트 셰이더는 다른 픽셀의 속성에 접근할 수 없습니다. 하지만, 픽셀의 깊이(Z값)은 수정할 수 있습니다. 프레그먼트 셰이더는 모든 픽셀 위치에서 프레임 버퍼에 접근할 수 없습니다. 프레그먼트 셰이더는 버텍스 셰이더와 비슷하게 오로지 현재 픽셀과

parksj3205

Lighthouse3d.com의 GLSL tutorial 번역입니다. 이번 색션에서는 그래픽스 파이프라인을 이해하는데 필요한 중요 개념 두 가지를 다룹니다. 바로 레스터라이제이션(rasterization)과 보간(interpolation)입니다. 그래픽스 파이프라인에서 이 두 단계는 고정 함수입니다. 즉, 프로그래밍이 불가능합니다. 하지만 레스터라이제이션이 수행되기 전에, 먼저 수행되는 몇 가지 작은 과정들이 있습니다. 이 과정에서 윈도우 좌표로의 변환을 클리핑(clipping)합니다. 클리핑 클리핑에서는 변환 버텍스가 조합된 프리미티브를 받고, 클리핑 볼륨 안쪽에 위치하는지 확인합니다. 프리미티브의 모든 부분이 클리핑 볼륨 안쪽에 위치한다면 해당 프리미티브는 변경되지 않습니다. 뷰 볼륨 밖에 있는 프리미티브는 제거됩니다. 클리핑 볼륨의 경계에서 모서리가 교차되는 프리미티브는 클리핑 됩니다. 클리핑 볼륨은 뷰 프러스텀 내부에 있는 모든 버텍스가 $(x_c,\

parksj3205

Lighthouse3d.com의 GLSL tutorial 번역입니다. 지오메트리 셰이더는 OpenGL 3.2부터 추가된 기능입니다. 이 단계는 선택사항입니다. 지오메트리 셰이더가 존재한다면 이전 단계에서 조립된 프리미티브를 입력으로 받습니다. 지오메트리 셰이더는 strips, fans, loops를 입력으로 받지 않습니다. 지오메트리 셰이더는 조립된 프로미티브를 입력으로 받으므로 draw 명령어에서 triangle strips로 지정하더라도, 실제로 지오메트리 셰이더는 triangles를 받습니다. 버텍스 셰이더와 다르게 지오메트리 셰이더는 작업 중인 프리미티브의 모든 정보를 가지고 있습니다. 지오메트리 셰이더는 각 입력 프리미티브에서 프리미티브를 구성하는 모든 버텍스에 접근할 수 있습니다. 만약 지정되어 있다면, 인접 정보에도 접근할 수 있습니다. 사용가능한 지오메트리 셰이더의 입력 프리미티브는 다음과 같습니다: points (1) lines (2)

parksj3205

Lighthouse3d.com의 GLSL tutorial 번역입니다. 테셀레이션은 패치를 입력으로 받고 점, 선, 삼각형 형태의 새 프리미티브를 생성하는 그래픽스 파이프라인의 단계입니다. 패치는 버텍스 셰이더에 의해 속성이 계산되는 버텍스 배열입니다. 버텍스 셰이더는 기존과 동일하게 동작하고, 입력으로 패치 버텍스들을 받아서 새로운 버텍스들을 출력으로 내보냅니다. 테셀레이션 셰이더는 변환된 버텍스 배열, 즉 패치를 받아서 일반적으로 더 작은 프리미티브로 나눕니다. 다른 OpenGL 프리미티브 타입과 다르게, 사용자가 패치의 버텍스 수를 정의할 수 있습니다. 다음과 같이 glPatchParameteri 함수는 드로우 콜에서 상수로 유지되는 해당 값을 설정하는데 사용됩니다: verticesPerPatch는 [1, GLMAXPATCH_VERTICES] 범위의 정수이어야 합니다. 이 상수는 glGetIntegerv 함수를 사용하여 구할 수 있습니다.

parksj3205

Lighthouse3d.com의 GLSL tutorial 번역입니다. 프리미티브 어셈블리 단계에서는 버텍스 셰이더로부터 처리된 버텍스와 어플리케이션에서 OpenGL glDraw* 류의 명령어에 의해 지정된 버텍스 연결성 정보(vertex connectivity information)를 입력으로 받습니다. 버텍스 연결성은 버텍스들이 프리미티브를 생성하기 위해 어떤 방식으로 연결되어 있는지를 나타냅니다. 프리미티브는 점, 선, 삼각형 또는 패치(patch)일 수 있습니다. 또한 인접 정보도 사용할 수 있습니다. 즉, 어플리케이션이 인접 프리미티브를 구성하는 버텍스를 제공할 수 있습니다. 이 정보는 오직 지오메트리 셰이더에서만 사용됩니다. 만약 지오메트리 셰이더가 활성화되지 않았다면, 인접 정보는 무시될 것입니다. 프리미티브 어셈블리는 프리미티브 또는 패치를 출력으로 생성합니다. 예를 들어, 6개의 버텍스 배열이 입력으로 들어오고, 연결성 정보를 triangles로 지정