# GLSL

18개의 포스트
post-thumbnail

react three.js + glsl (shaer)

glsl을 알게 된 건 three.js 예제를 보기 위해 찾아보던 때였다. 내가 원하는 거 잖아! 하고 찾아보게 됐다. 나는 지금 할 게 있는데 왜 이걸 하고 있나 glsl openGL Shading Language 를 줄인 말이다. 쉐이더라고 부른다. ModelM

약 3시간 전
·
0개의 댓글
·
post-thumbnail

[번역] GLSL Tutorial - 프레그먼트 셰이더

프레그먼트 셰이더는 프레그먼트를 처리합니다. 기본적으로 프레그먼트는 이전 단계에서 보간된 모든 데이터를 더한 윈도우 상의 위치(X, Y)와 깊이값(Z)입니다.레스터라이제이션을 통해 생성되고 보간에서 속성이 계산된 프레그먼트는 이제 프레그먼트 셰이더로 하나씩 입력됩니다.

2022년 6월 22일
·
0개의 댓글
·
post-thumbnail

[번역] GLSL Tutorial - 레스터라이제이션과 보간

이번 색션에서는 그래픽스 파이프라인을 이해하는데 필요한 중요 개념 두 가지를 다룹니다. 바로 레스터라이제이션(rasterization)과 보간(interpolation)입니다. 그래픽스 파이프라인에서 이 두 단계는 고정 함수입니다. 즉, 프로그래밍이 불가능합니다.하지만

2022년 6월 22일
·
0개의 댓글
·
post-thumbnail

[번역] GLSL Tutorial - 지오메트리 셰이더

지오메트리 셰이더는 OpenGL 3.2부터 추가된 기능입니다.이 단계는 선택사항입니다. 지오메트리 셰이더가 존재한다면 이전 단계에서 조립된 프리미티브를 입력으로 받습니다. 지오메트리 셰이더는 strips, fans, loops를 입력으로 받지 않습니다. 지오메트리 셰이

2022년 6월 22일
·
0개의 댓글
·
post-thumbnail

[번역] GLSL Tutorial - 테셀레이션

테셀레이션은 패치를 입력으로 받고 점, 선, 삼각형 형태의 새 프리미티브를 생성하는 그래픽스 파이프라인의 단계입니다.패치는 버텍스 셰이더에 의해 속성이 계산되는 버텍스 배열입니다. 버텍스 셰이더는 기존과 동일하게 동작하고, 입력으로 패치 버텍스들을 받아서 새로운 버텍스

2022년 6월 22일
·
0개의 댓글
·
post-thumbnail

[번역] GLSL Tutorial - 프리미티브 어셈블리

프리미티브 어셈블리 단계에서는 버텍스 셰이더로부터 처리된 버텍스와 어플리케이션에서 OpenGL glDraw\* 류의 명령어에 의해 지정된 버텍스 연결성 정보(vertex connectivity information)를 입력으로 받습니다.버텍스 연결성은 버텍스들이 프리미

2022년 6월 22일
·
0개의 댓글
·
post-thumbnail

[번역] GLSL Tutorial - 버텍스 셰이더

버텍스 셰이더는 한 번에 한 버텍스 씩, 각 버텍스에서 실행됩니다. 셰이더에는 그래픽 프리미티브를 구성하는 다른 버텍스에 대한 정보가 없으며, 버텍스가 속한 프리미티브의 타입이 무엇인지 모릅니다. 셰이더는 하나의 입력 버텍스 당 하나의 출력 버텍스를 내보냅니다.각 버텍

2022년 6월 22일
·
0개의 댓글
·
post-thumbnail

[번역] GLSL Tutorial - 파이프라인(OpenGL 3.2 - OpenGL 4.2)

아래 그림은 OpenGL(3.2 버전 이상) 파이프라인의 간략한 다이어그램입니다. 다음 장에서 각 단계에 대해 설명할 것입니다. 괄호 안의 숫자는 파이프라인의 일부 경로에서 요구하는 OpenGL 버전입니다.http://www.lighthouse3d.com/tu

2022년 6월 22일
·
0개의 댓글
·
post-thumbnail

[번역] GLSL Tutorial - Core

GLSL tutorial의 업데이트 버전입니다. 이 튜토리얼에서는 core 버전만 다룹니다. compatibility 버전을 원하신다면 GLSL 1.2 tutorial로 이동하세요.이 튜토리얼의 목적은 GLSL과 OpenGL을 완벽히 설명하여 OpenGL 스펙을 대체하

2022년 6월 22일
·
0개의 댓글
·

벡터

점u에서 점v로 가는 벡터를 a벡터라고 할때..a = v(종점) - u(시점)라고 표현할 수 있다.

2022년 5월 19일
·
0개의 댓글
·

격자만들기

2022년 3월 26일
·
0개의 댓글
·
post-thumbnail

GLSL 기초

https://thebookofshaders.com/http://editor.thebookofshaders.com/ex) abs(), sin() 등...https://thebookofshaders.com/glossary위 링크에서 확인 가능f

2022년 3월 23일
·
0개의 댓글
·

glossary for GLSL

length함수는 원점으로부터의 거리를 구해 준다.

2022년 1월 15일
·
0개의 댓글
·

Projection Matrix

three.js에서 canvas를 리사이즈 할때 요소들이 이상하게 보이지 않게 하려면 다음과 같은 작업을 해줘야 한다.updateProjectionMatrix()라는 것은 3점 좌표(x, y, z)를 2점 좌표(x, y)로 바꾸는 작업이다. 소실점 계산이라고 생각하면

2022년 1월 14일
·
0개의 댓글
·

Transforming the vertex

ModelViewMatrix openGL에서 객체가 output될때까지 여러 단계를 처치게 된다. Model Coordinates, World Coordinates, Camera Coordinates를 다루는 과정을 Model View라고 하며, 이를 수행하는 Matr

2022년 1월 14일
·
0개의 댓글
·
post-thumbnail

셰이더로 하프톤(Halftone) 만들어보기

간단하고 쉽게 하프톤 효과를 만들어봅니다.

2021년 4월 30일
·
1개의 댓글
·
post-thumbnail

🎆 프론트개발자 연봉 떡상하는 스킬 - GLSL

🙁 이 스킬 배우는 걸 더 미루면, 연봉 인상도 미뤄집니다! 프론트 개발자라면 꼭 한번 배워봐야할 스킬을 공개합니다!

2021년 4월 21일
·
11개의 댓글
·
post-thumbnail

[OpenGL]VAO 와 VBO응용

VAO, VBO를 모르는 순간 힘들어진다

2020년 9월 9일
·
0개의 댓글
·