# GLSL
앗! threejs와 React로 취업에 도움되는(?) 포트폴리오를 만들어보자. [실전편 1탄]
오늘은 드디어 orthographic camera를 이용한 포트폴리오의 간단한 세팅을 통해 threejs와 한 층 더 친숙해지는 시간을 가져볼 생각이다.바로 코딩에 착수하는 것이 아니라, 기본적으로 어떠한 구조로 만들 것인지, 또한 중요하게 공부할 만한 포인트는 어떤
앗! threejs와 React로 취업에 도움되는(?) 포트폴리오를 만들어보자. [실전편 intro]
완성된 페이지는 대략 아래와 같은 모습이 될 것이다.포트폴리오 페이지아무튼간 위의 라이브러리와 기술들과 함께 재밌게 구현해 볼 예정이다.!
앗! 취업에 도움되는(?)Threejs를 vanila 및 react-three-fiber 버전의 예제와 함께 복습해보자. [코드편 3탄]
코드편 3탄에서는 light(조명), shadow(그림자), material의 빛과 관련된 속성에 대해서 알아보도록 하겠다. 이번에도 역시, 같은 코드를 vanila javascript와 react 두 가지 방식으로 모두 작성해보겠다. vanila javascrip
앗! 취업에 도움되는(?)Threejs를 vanila 및 react-three-fiber 버전의 예제와 함께 복습해보자. [코드편 2탄]
코드편 2탄은 여기서 마무리하고 3탄에서 계속 공부해보자!
앗! 취업에 도움되는(?)Threejs를 vanila 및 react-three-fiber 버전의 예제와 함께 복습해보자. [코드편 1탄]
Threejs를 Vanila Javascript와 React 두 가지 방식으로 모두 실습해보며 기본적인 내용을 학습할 수 있다.
앗! 취업에 도움되는(?)Threejs를 복습해보자. [개념편 3탄](마지막탄)
앞선 2탄에서는 1탄에 이어, 조금은 고급화된 촬영 기술에 대하여 공부했다. 3탄에서는, 나무 블럭 말고도 다양한 형태의 촬영 객체에 대해 알아보고, 움직이는 객체에 대한 촬영기법에 대해서도 알아보겠다. 7가지(scene, camera, renderer, mesh,
앗! 취업에 도움되는(?)Threejs를 복습해보자. [개념편 2탄]
눈 앞에 있는 키보드를 사진찍는다고 했을 때, 사진 속에 예쁘게 담기게 하려면 키보드와 '적절한 거리' 를 유지해야 할 것이며, 너무 과하지 않은 '각도(시야각)'으로 촬영해야 할 것 이다. 또한, 핸드폰을 가로로 들고 찍느냐, 세로로 들고 찍느냐에 따라서도, 가로
앗! 취업에 도움되는(?)Threejs를 복습해보자. [개념편 1탄]
정확한 설명은 자바스크립트 언어로 구현된 WebGL(Web Graphcis Library)이다.threejs가 궁금하다면, 하단의 링크를 눌러 공식문서를 다녀와 보도록하자.<a href='https://threejs.org/docs/index.htmlsc
msdf font
webgl작업을 하다보면 만나는 msdf폰트에 대해 알아보자.우선 왜 이런 기술이 나왔을까? 우선 glsl에서는 그냥 쌩으로 폰트를 읽어 올 수 없다. 그래서 폰트를 이미지화 해서 가져와야 하는데, 이럴경우 각각의 크기별로 폰트의 이미지를 만들어야 하는데 이러면 비 효
post processing
three.js에서 post processing을 사용하면 하나의 pass를 통해서 효과가 부여된 이미지가 전달된다.위와 같이 pass를 통해 다음 pass로 전달이 되는데 이때 사용되는 이름이 'tDiffuse'이다.tDiffuse의 값을 null로 한다는 것은 이전
3d 용어
폴리곤이 실제로 화면에 그려지는 크기에 맞추어 텍스처를 교체하는 기법. 다른 해상도의 텍스처를 공통된 uv좌표로 다룰 수 있게 하려고 실제 텍스처 이미지 크기를 따르지 않고 좌표로 지정한다.
[OpenGL ES] 셰이더 다루기
이번 장에서는 정말로 윈도우에 삼각형을 그려볼 것입니다. 이전 장의 렌더링 파이프라인에서 버텍스 셰이더와 프래그먼트 셰이더는 프로그래밍이 가능하다고 했습니다. 바로 이 셰이더들을 활용하여 윈도우에 삼각형을 그릴 것입니다. 물론 원래는 버텍스 셰이더의 이전 단계인 버텍스
react three.js + glsl (shaer)
glsl openGL Shading Language 를 줄인 말이다. 쉐이더라고 부른다. ModelM
[번역] OpenGL GLSL Tutorial - 프레그먼트 셰이더
프레그먼트 셰이더는 프레그먼트를 처리합니다. 기본적으로 프레그먼트는 이전 단계에서 보간된 모든 데이터를 더한 윈도우 상의 위치(X, Y)와 깊이값(Z)입니다.레스터라이제이션을 통해 생성되고 보간에서 속성이 계산된 프레그먼트는 이제 프레그먼트 셰이더로 하나씩 입력됩니다.
[번역] OpenGL GLSL Tutorial - 레스터라이제이션과 보간
이번 색션에서는 그래픽스 파이프라인을 이해하는데 필요한 중요 개념 두 가지를 다룹니다. 바로 레스터라이제이션(rasterization)과 보간(interpolation)입니다. 그래픽스 파이프라인에서 이 두 단계는 고정 함수입니다. 즉, 프로그래밍이 불가능합니다.하지만
[번역] OpenGL GLSL Tutorial - 지오메트리 셰이더
지오메트리 셰이더는 OpenGL 3.2부터 추가된 기능입니다.이 단계는 선택사항입니다. 지오메트리 셰이더가 존재한다면 이전 단계에서 조립된 프리미티브를 입력으로 받습니다. 지오메트리 셰이더는 strips, fans, loops를 입력으로 받지 않습니다. 지오메트리 셰이
[번역] OpenGL GLSL Tutorial - 테셀레이션
테셀레이션은 패치를 입력으로 받고 점, 선, 삼각형 형태의 새 프리미티브를 생성하는 그래픽스 파이프라인의 단계입니다.패치는 버텍스 셰이더에 의해 속성이 계산되는 버텍스 배열입니다. 버텍스 셰이더는 기존과 동일하게 동작하고, 입력으로 패치 버텍스들을 받아서 새로운 버텍스
[번역] OpenGL GLSL Tutorial - 프리미티브 어셈블리
프리미티브 어셈블리 단계에서는 버텍스 셰이더로부터 처리된 버텍스와 어플리케이션에서 OpenGL glDraw\* 류의 명령어에 의해 지정된 버텍스 연결성 정보(vertex connectivity information)를 입력으로 받습니다.버텍스 연결성은 버텍스들이 프리미