본문 바로가기

전체 글984

[Canvas] 캔버스 사이즈 설정 캔버스 사이즈 설정. HTML Canvas는 일반적인 HTML 요소와는 다르게 렌더링 방식이 다릅니다. HTML 요소들은 일반적으로 브라우저가 렌더링을 할 때, 요소의 크기와 위치를 계산하고 그에 따라 화면에 그려집니다. 반면에 HTML Canvas는 픽셀 단위로 직접 그리기를 수행하므로, CSS로 지정된 크기와 Canvas의 실제 크기가 다를 경우 브라우저는 Canvas를 재조정하지 않습니다. 따라서 Canvas의 크기가 CSS로 지정된 크기와 다를 경우, Canvas가 재조정되어 물체가 뭉개지는 현상이 발생할 수 있습니다. 이를 방지하기 위해서는 Canvas 요소의 실제 크기를 JavaScript를 사용하여 지정하거나, Canvas 요소의 크기와 CSS 크기를 일치시켜야 합니다. 캔버스의 사이즈를 조.. 2023. 5. 1.
구조체 구조체란? 서로 다른 자료형을 갖는 자료들의 모임을 하나의 자료형으로 정의하여 사용하는 자료형이다. 배열은 동일 자료형만 다루는 것과 달리 다양한 타입들의 모음을 갖도록 할 수 있다. 형태는 다음과 같다. struct 구조체명{ 멤버 1; 멤버 2; ... }; 예약어인 struct를 사용하여 구조체를 정의하며 이후 하위 구조체를 작성한다. 이렇게 만든 구조체는 다음과 같이 선언할 수 있다. struct score, var1, var2; 실제 자료의 형태를 만들고 이를 구조체로 변환해 보자. 학번, 이름, 국영수에 대한 점수를 가진 자료를 구조체로 변환해 보자. struct student x,y; struct student { char name[20]; char no[4]; int age; int sco.. 2023. 5. 1.
포인터와 배열. C언어의 Hello World는 문자열을 입력받는 것으로 보통 시작하더라. 그런데 문자열을 나타내는 타입이 없는 C언어에서 Hello World는 배열을 사용하는데 여기서 포인터의 개념이 바로 들어간다. 무섭게 Hello World부터 포인터라니 char 형 포인터를 알아보자. 포인터 변수는 주소값을 갖는다고 공부했다. 그런데 어떻게 문자열을 받을 수 있을까? char *cp = "hello world"; 이상하다. 포인터 변수에는 주소를 할당한다고 했는데, 예제를 보면 문자열을 할당하고 있다. printf("%s\n", cp); printf("%c\n", *cp); printf("%c\n", *(cp + 1)); printf("%c\n", *(cp + 2)); printf("%c\n", *(cp + 3.. 2023. 4. 29.
3D Computer Graphics (8) object picking? 3D 물체를 마우스 클릭이나 터치와 같은 행동을 할 때 어떻게 이를 감지할까? 픽셀을 선택했다고 해도 이 픽셀이 어떤 3D 물체 것인지도 알 수 없다. 2차원에서는 힘들다. 그렇다면 3차원의 기하적인 추론을 통해 달성할 수 있지 않을까? Z좌표가 없다고 하면 스크린 상에서 마우스 포인터의 좌표는 (x, y, 0) 일 것이다. 이때 우리는 ray를 한 번 고려해보자. 시작점이 있고 한쪽으로 무한하게 뻗어나가는 직선이다. z 축 방향으로 모두 뻗어나간다고 할 때, ray의 정의는 시작점(x, y)과 direction vector(0,0,1)로 표현될 수 있지 않을까? 그럼 이 ray가 누구랑 부딪치는지 판별을 하면 되지 않을까? 근데 viewport에서 오브젝트에 대한 정보가 있.. 2023. 4. 29.
포인터 C언어의 장벽으로 포인터를 많이 꼽는다고 들었다. 오늘은 포인터에 대해 알아보자. 목록 포인터의 개념 포인터변수의 선언방법 포인터변수의 참조방법 포인터의 기억공간 표현 포인터 연산 개념 포인터는 변수이다. 변수는 특정 데이터 값을 가지고 있다. 그렇다면 포인터는 무슨 데이터 값을 가지고 있을까? 바로 특정 데이터가 저장된 기억장소의 주소값을 가지고 있다는 것이다. 그렇다 우리는 기억공간을 변수명으로 접근하려는 것이 아니라 실제 주소로 접근하기 위한 방법이다. 일반적인 변수를 표현하는 방법은 변수를 선언하고 이를 통해 기억공간이 할당된다. 그리고 할당된 기억공간에 변수에 대입된 데이터가 저장되게 된다. 그리고 할당된 기억공간은 주소가 부여되어 있다. 즉 일반적인 변수는 그 자체가 기억공간 주소에 할당된 값.. 2023. 4. 29.
3D Computer Graphics (7) 오일러 변환(Euler transformation)은 3차원 공간에서 회전과 이동을 모두 수행하는 선형 변환이다. 오일러 변환은 3개의 변환 축(roll, pitch, yaw)을 사용하여 객체를 움직이는 방법을 설명한다. 각 축은 각도를 기준으로 회전하며, roll은 x 축을 기준으로, pitch는 y 축을 기준으로, yaw는 z 축을 기준으로 회전한다. 이 세 축의 회전 각도를 조합하여 3D 객체를 움직일 수 있다. 오일러 각은 다음과 같이 나타낼 수 있습니다. 1. XYZ 회전 x, y, z 축으로 회전하는 각도를 나타냅니다. 이 회전 순서는 x축 -> y축 -> z 축 순서로 이루어집니다. 2. XZY 회전 x, z, y 축으로 회전하는 각도를 나타냅니다. 이 회전 순서는 x축 -> z 축 -> y.. 2023. 4. 26.
Three.js 라이브러리를 확장한 객체지향 구조 보호되어 있는 글 입니다. 2023. 4. 26.
물리공간 구축 질량을 갖는 공을 가지고 평면에 떨어지는 공을 만들어보자. cannon-es를 활용하여 물리공간을 구축할 것이다. three.js 외에도 cannon-es를 위한 별도의 추가 코드가 필요하다. import * as THREE from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; import * as CANNON from 'cannon-es'; export default function () { const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true, }); renderer.setClearColor(0x333333, 1); .. 2023. 4. 24.
Python 네덜란드 개발자인 Guido van Rossum (히도 판로 쉼)이 1991년 개발했다. 원래는 분산 운영체제의 시스템 관리를 위한 쉘 스크립팅 언어로 개발하려고 했다. 파이썬은 상당히 많은 패러다임을 차용했다. 명령형, 절차적, 객체지향 ,함수형 프로그래밍을 전부 지원한다. 그리고 파이썬은 상당히 많은 분야에서 사용된다. 응용 프로그램, 웹, 백 엔드, 사물 인터넷 분야뿐만 아니라 교육적인 목적으로도 많이 활용된다. 91년 ABC의 후속 프로그래밍 언어로 시작하고 DARPA에 누구나 할 수 있는 컴퓨터 프로그래밍이라는 주제로 제안서를 제출한다. 00년에 파이썬 2.0이 출시되고 파이썬은 커뮤니티를 통한 개발 체계를 시작한다. 자바나 c#과 같은 언어는 마이크로소프트, 오라클이라는 조직에서 만든 만큼 해.. 2023. 4. 24.
4월 말 정리 방통대의 모든 과제는 마무리해간다. 파이썬 관련 강의 이후 과제만 제출하면 마무리될 것 같다. 모든 주말을 현재 프론트엔드에 집중하고 있기에 조금 밀렸다. 3년 전에 배운 프론트엔드가 아니다. 성능 개선을 어떻게 개선하고 있는지 알아보다 보면 기존 지식은 전부 폐기 상태이다. 프런트를 만질 기회가 와서 다시 열심히 복습 및 적용하고 있는데, 꽤 스트레스받는 일이다. 어차피 웹 개발을 어느 정도 하긴 해야 할 것 같은데, 어드민 사이트는 어딜 가나 백엔드 개발자가 만들 수 있으니까 Vue나 Next.js 하나 공부 시작할 까 생각 중인데.. Next는 React기반이라 공부량이 커질 것 같기도 한데.. 취미가 3D 그래픽이니까 시간날 때마다 관련 서적이나 영상 찾아보는 걸로 하고, 현재 진행 중인 프로젝트.. 2023. 4. 23.
웹 이미지. 크게 비트맵과 벡터라는 개념으로 나뉜다. 우선 비트맵은 픽셀들이 모여 만들어진 정보의 집합으로 레스터(Raster) 이미지라고도 부른다.. gif,. png,. jpeg 등이 있다. 반대로 점, 선, 면의 위치, 색상 등 수학적 정보의 형태로 이루어진 이미지를 말하며 .svg 등이 있다. 비트맵은 정교하고 다양한 색상을 자연스럽게 표현할 수 있다. 다만 확대/축소 시 계단 현상, 품질이 저하된다. 벡터 이미지는 확대/ 축소에서 자유롭고 용량 변화가 없다. 다만 정교한 이미지를 표현하기는 어렵다. 왜냐하면 벡터 이미지는 점,선,면으로 구성되어 있어 사진과 같은 것을 표현하는 건 어려움이 있다. 그래서 보통 로고나, 아이콘들은 벡터 이미지를 많이 사용하며 복잡한 백그라운드, 제품 사진 등은 레스터 이미지를 .. 2023. 4. 22.
IntersectionObserver API 보호되어 있는 글 입니다. 2023. 4. 22.
커스텀 커서 및 parallax scroll 보호되어 있는 글 입니다. 2023. 4. 22.
이미지 최적화 방식 및 Grid 반응형 구현 코드 보호되어 있는 글 입니다. 2023. 4. 20.
C언어에서 배열을 어떻게 다룰까? c언어에서 배열을 선언하게 되면 그 배열의 각 요소를 위한 기억공간이 연속해서 할당된다. int array [5]라는 1차원 배열을 선언하게 되면 int 형 변수 5개가 모여 구성되는 array라는 이름의 기억공간을 가진다는 것을 말한다. C언어서 배열의 이름은 배열의 시작 주소가 저장된다는 점을 기억해야 한다. 즉 별도의 첨자 []가 없는 array라는 자체 값은 array [0]의 주소(&array [0])이다. 배열명인 array 자체는 int형 포인터와 같다. 어떤 기억 클래스를 가지는지에 따라 저장공간이 달라질 수 있지만 int arrray[5]는 4 byte * 5인 20byte 공간을 차지하고 기억공간에 연속적으로 위치하고 있을 것이다. 타 언어와 같이 배열의 선언과 초기화를 동시에 진행한다.. 2023. 4. 17.
Header Fixed Header가 다음과 같은 구조를 갖는다고 생각해 보자. ... Header는 스크롤 이벤트에 따라 position이 변경된다. 즉 기존의 HTML 구조에서 독립적인 요소로 변경된다는 것이다. 예를 들어 scrollY 값이 0이 아닌 경우 header 태그에. sticky css를 적용시킨다고 가정해 보자. .sticky { position: fixed; top: 0; left: 0; width: 100%; z-index: 11; } header에는 아무런 css를 설정하지 않았다고 하자. 이 결과는 갑자기 Header가 툭 끊어지는 느낌과 하위 콘텐츠가 위로 확 올라가는 느낌을 받는다. 붙을 때도 마찬가지로 header 요소가 위로 휙 끊어져서 붙는 것처럼 보이며 하위 콘텐츠가 아래로 확 내려가는 끊어.. 2023. 4. 17.
AWS Summit Seoul 오랜만에 서밋이 열리는 것 같다. 국내 최대 규모의 IT 콘퍼런스로 평일인 관계로 참석은 못하고, 사실 등록도 조기마감돼서 신청도 못하는데, 아마 영상은 남을 것이기 때문에 시간내서 찾아볼 영상을 조금 정리해 본다. 클라우드 네이티브. 개발 기간 단축 및 운영 비용 절감이라는 소리가 매우 궁금한 사례이다. 데이터베이스를 대규모 트래픽을 위해 어떻게 활용했는지 대기업의 기술을 엿볼 수 있는 기회이다! https://www.youtube.com/watch?v=-uWq6W-rD9k&t=409s 클라우드의 운영 관리 사례를 보며 다른 기업은 어떻게 모니터링을 처리하는지 확인할 수 있다. 개인적으로 미디어 처리 파이프라인이 궁금해서.. 무중단 마이그레이션이라니.. 성능 개선 세션은 항상 옳다. 아무도 걸어가지 않.. 2023. 4. 17.
입력 및 출력 프로그램 보호되어 있는 글 입니다. 2023. 4. 16.
3D Computer Graphics (6) 보호되어 있는 글 입니다. 2023. 4. 15.
3D Computer Graphics (5) GPU에 의해서 렌더링이 어떻게 수행되는지 알아보고 그중에서 View transform에 대해 조금 더 알아보자. 우선 GPU Rendering Pipeline은 다음과 같이 구성되어 있다. Polygon mesh의 정점들은 vertex array에 저장이 되어있다. 이러한 정점들을 vertex shader가 병렬적으로 한 번에 하나씩 처리하면서 다양한 연산이 적용된다. 그 이후 각 정점의 정보를 사용해 Rasterizer 과정을 거친다. 이 과정에서 삼각형을 재조립한 이후 각 삼각형의 내부 픽셀의 색상을 결정할 정보를 각 픽셀마다 저장하는 작업을 거친다. 이 과정을 하드웨어를 통해 이루어진다. 이를 fragment라고 한다. 이 픽셀에 저장된 정보를 가지고 fragment shader가 각 픽셀의 색상.. 2023. 4. 15.
3D Computer Graphics (4) Three.js에서의 포스트 프로세싱을 적용하는 예제 코드를 보면 Three.js에서 제공하는 여러 객체들이 존재했다. FilePass, GlitchPass, OutlinePass 이들의 구현체를 조금 살펴보자. import { ShaderMaterial, UniformsUtils } from 'three'; import { Pass, FullScreenQuad } from './Pass.js'; import { FilmShader } from '../shaders/FilmShader.js'; class FilmPass extends Pass { constructor( noiseIntensity, scanlinesIntensity, scanlinesCount, grayscale ) { super(); i.. 2023. 4. 15.
Post Processing https://threejs.org/docs/index.html#manual/en/introduction/How-to-use-post-processing three.js docs threejs.org 포스트 프로세싱은 렌더링 효과를 추가하는 작업이다. 이는 유티니, 영화에서도 많이 사용하는 기법이기 때문에 이 개념을 한번 숙지하면 여러모로 도움이 될 수 있다. 렌더링 된 화면에 필터효과를 입힐 때 쉐이더를 이용할 수 있지만 Three.js에는 다양한 post processor 예제들이 있어 이를 확인하면서 공부할 수 있다. Renderer는 카메라를 통해 Scene의 snapshot을 찍는데, 이를 Render Target이라고 한다. 이때 이를 Canvas에 그리기 전에 우리는 filter를 통해 몇 .. 2023. 4. 13.
Setting 요즘은 vite로 모듈 번들러를 사용한다고 한다. ㄷㄷ 어떻게 사용하는지 확인해 보자. npm create vite 실행 이후 몇 가지 프로젝트 정보를 입력하면 다음과 같이 폴더들이 생긴다. 이후 의존성을 받아주어야 한다. 해당 폴더로 가서 npm install 명령어를 사용한다. 이후 동작을 확인하기 위해 npm run dev 명령어를 사용한다. 동작을 확인했으면 다음과 같이 필요한 파일만 남겨준다. 이후 index.html 파일을 수정해 준다. DOCTYPE html> Three.js Interactive Web style.css은 모두 지우고 reset.css를 받아서 사용해도 될 것 같다. 이후 vite가 변경된 index.html 파일 위치를 알 수 있도록 설정해주어야 한다. vite.confi.. 2023. 4. 11.
Grid 과거에 전체적인 HTML 구조를 잡기 위해 css flex를 이용했지만 이번에는 Grid를 사용해보려 한다. 딱 이 정도까지만 우선 이해하자. CSS Grid는 이차원 레이아웃 시스템이로 콘텐츠를 행과 열에 배치할 수 있고, 복잡한 레이아웃을 직접 직관적으로 만들 수 있는 수많은 기능이 존재합니다. 시작하는 것은 다음과 같이 그리드 컨테이너에게 display: grid; 속성을 적용하는 것으로부터 시작됩니다. 만약 아이템이 block 속성의 요소라면 display:grid; 속성으로만으로는 효과가 없습니다. 그렇다면 line 요소들로 적용하면 어떻게 될까요? 자주 사용되는 line 요소는 , , , , , 등이 존재합니다. 인라인 요소 보통 인라인 요소는 데이터와 다른 인라인 요소만 포함할 수 있으며, .. 2023. 4. 10.
[CSS] Cascade, specificity, inheritance 최근 홈페이지 하나를 만들면서 가장 시간을 많이 보낸 것이 CSS인데, 분명 속성을 공식문서를 보고 적용했는데, 해당 속성이 작동하지 않는 것을 확인할 수 있습니다. 실제 크롬에서 개발자 도구를 통해 확인하면 취소선이 그어져있지만 이에 대한 별도의 로그가 없기 때문에 왜 적용이 안 되는 것인지 확인하기가 어려웠습니다. 백엔드를 주로 다루기 때문에 기본적인 Web 지식 중 하나인 CSS를 소홀히 공부한 것을 반성하고 다시 한 번 기초를 잡아보려고 합니다. CSS는 Cascading Style Sheets를 의미하며, 첫 번째 단어인 Cascade를 이해하는 것은 매우 중요합니다. 우선 속성이 중복된 경우 문제는 동일한 속성의 다른 값을 동일한 요소에 적용하는 두 개의 규칙을 적용하려고 하는 경우 발생합니다.. 2023. 4. 10.
3D Computer Graphics (3) GPU Rendering Pipe Line을 공부하다 보면 Modeling 이후 좌표 변환을 수행하는 Vertex Shader 부분이 존재한다. Modeling 과정에서 만들어진 Polygon Mesh를 GPU가 입력을 받게 되는데, 이때 각 정점들은 메모리에 다양한 정보를 올린다. vertex array, noraml vertex array, texture coordinate 등등 정보를 가지는데, vertex Shader가 이를 한 번에 하나씩 로드하면서 여러 가지 연산을 수행한다. vertex shader는 프로그램이다. 그렇기 때문에 여러 가지 연산을 프로그래밍해야 하는데, 이때 다음과 같은 역할을 맡는다. modeling 과정에서 생긴 object-space에서 world transform을 통.. 2023. 4. 8.
기억장치와 PLD(2) 2023.04.02 - [도전] - 기억장치, PLD (1) 기억장치, PLD (1) 알아볼 것. 기억장치의 종류와 특성 RAM, ROM의 내부 구조 및 동작원리 PLD의 구조 및 동작원리 (2) 기억장치. 처리할 프로그램과 데이터를 기억하거나, 처리한 후의 결과를 기억을 하는 장치이다. chinggin.tistory.com PLD 프로그램이 가능한 전자 퓨즈선으로 연결된 게이트의 배열로 구성된 집적회로이다. 디지털 시스템의 설계를 위해 PLD를 사용합니다. PLD를 이용하게 되면 복잡한 논리회로를 하나의 직접회로로 프로그래밍할 수 있어 필요한 소자들의 수와 비용을 절감할 수 있는 장점이 있습니다. 주로 AND 게이트와 OR 게이트의 배열 구조를 갖는 집적회로입니다. 결국 PLD는 논리요소들이 배열 행태.. 2023. 4. 4.
영상 (1) https://www.youtube.com/watch?v=UY_kBW8NrPM 2023. 4. 3.
기억장치, PLD (1) 알아볼 것. 기억장치의 종류와 특성 RAM, ROM의 내부 구조 및 동작원리 PLD의 구조 및 동작원리 (2) 기억장치. 처리할 프로그램과 데이터를 기억하거나, 처리한 후의 결과를 기억을 하는 장치이다. 그중 주 기억장치의 RAM, ROM, PLD에 대해서 알아볼 것이다. 기억장치는 2진 기억소자를 모아놓은 것을 기억장치라고 할 수 있고 이 2진 기억소자를 메모리 셀이라고 한다. 기억장치에 정보가 기억되는 경우 내부에 2진 비트들의 조합이 배열되어 데이터를 기억한다. 2진 데이터가 기억장치에 저장되는 단위를 word라고 한다. 이 word는 m개의 비트로 구성된다. m은 8의 배수이다. 각 단어의 위치는 address로 부여한다. 기억장치의 성능은 정보를 읽거나 기록하는 속도에 좌우된다. 한 워드를 읽어.. 2023. 4. 2.
3D Computer Graphics (2) 2023.04.01 - [도전] - 3D Computer Graphics (1) 3D Computer Graphics (1) 멋진 3D 인터랙티브 홈페이지를 발견했다. 나도 한번 만들고 싶었다. https://zero.tech/ ZERO - Distribute the Future zero.tech 이를 위해 무엇이 필요한지 정보를 수집하던 도중 여러 키워드가 나왔다. 1. Three. chinggin.tistory.com 이어서 알아보자. Rigging 가끔 움직임을 표현해야 하는데, 이를 위해 skeleton을 사용한다. 이러한 뼈를 만들게 되면 폴리곤 메시에 넣고 움직임(애니메이션)을 구현한다. 뼈와 폴리곤 메시의 상관관계를 정하는 작업을 간단하게 Rigging이라고 한다. 이후 뼈를 통해 애니메이션.. 2023. 4. 1.

티스토리툴바