본문 바로가기

FrontEnd45

itch.io https://itch.io/game-assets Top game assets Find game assets like Mystic Woods - 16x16 Pixel Art Asset Pack, Pixel Art GUI Elements, Sprout Lands - Asset Pack, Modern exteriors - RPG Tileset [16X16], Medieval Fantasy Character Pack on itch.io, the indie game hosting marketplace itch.io itch.io에서는 다양한 에셋들을 무료 혹은 유료로 구매할 수 있다. 2D 게임에서 장애물을 구현하기 위해 몇 자료를 받아 내가 필요한 형태로 가공하려고 한다. 이를 보면 분할된 여러 이미지가 있어.. 2023. 6. 3.
2D 이미지로 입체감을 주는 방법 무한하게 이어지는 배경이미지를 구현하는 개념부터 알아보자. 이는 캐러셀에서 loop를 하는 개념과도 동일하다. 하나의 이미지로는 무한하게 슬라이드 하지 못한다. 따라서 해당 뒤에 이어지거나 루프로 초기화가 될 이미지를 한번 더 붙여줘야 한다. 만약 앞 뒤로 이동하게 된다면 원본 이미지 배열 앞, 뒤에 각각 이어지는 이미지를 준비해 주자. 이를 canvas로 구현하면 다음과 같다. constructor(config){ this.img = config.img; this.speed = config.speed; this.height = App.height; this.width = App.height * (this.img.width / this.img.height); this.leftPos = {x: 0, y: .. 2023. 5. 8.
Antialiasing Transparency는 Antialiasing과 연관이 있다. 안티엘리어싱을 사용할지 말지는 Renderer가 결정한다. gpu 렌더러가 안티엘리어싱을 제공하면 사용할 수 있고 그렇지 않다면 사용하지 못하는 것이다. 여기서 시작하여 어떤 물체가 투명하냐 불투명하냐를 결정하는 것은 Material에서 결정되게 된다. 이 둘은 무슨 관계일까? 그려지는 물체가 투명도가 있으면 원래 그려져 있던 것과 새롭게 그려지는 것을 블렌딩 하는 과정에서 투명도를 어떻게 반영할 것인가를 만들어서 그려냅니다. 이 투명도는 GPU의 블렌딩이 해주어야 합니다. 안티앨리어싱이 없으면 계단현상이 일어난다. 이는 픽셀이 생각보다 크기 때문이다. 해상도가 정말 좋다면 안티앨리어싱을 안 해도 된다. 다만 어찌 됐는 계단현상을 발생할 것.. 2023. 5. 6.
Texture Three.js에서 Texture는 Materia에 붙여서 사용하게 된다. 물체에 그림을 어떻게 입혀야 할까? gemetric modeling과 Texture Mapping이 있다. vertex 하나하나 geometry를 모델링하는 것보다 텍스처를 매핑하는 것이 훨씬 더 효율적이다. geometric 모델링은 각 버텍스 하나하나 마다 색을 할당한다. 얼마나 많은 연산이 일어나야 할까? 대신 texture mapping은 실제 이미지를 표현에 감싸는 식으로 동작한다. 이러한 이미지를 실제로 모델의 어느 부분에 붙여야 하는지 알려주는 행위가 필요하다. 이를 이미지의 uv좌표와 모델의 버텍스 좌표가 어디에 매핑되는지 알려주어야 한다. 다양한 이미지가 있을 수 있다. gray scale, color 등등.. 얻.. 2023. 5. 6.
Light Three.js에서 Light를 추가하면 할수록 성능이 떨어진다. 그 이유는 간단하다. 빛이 하나 있을 때 버텍스에 대해 버텍스 수만큼만 빛을 처리하면 되는데 빛이 여러 개 있는 경우 모든 버텍스에 빛의 수만큼 곱한 연산이 필요하기 때문이다. 그렇기에 빛을 사용할 때 조심해서 사용해야 한다. 기본적인 조명 모델에 대해 알아보자. 1. Light Radiation 네온사인, 태양과 같이 자체적으로 빛을 내는 모델이 있다. 그러면 단색으로 칠하기만 하면 된다. 비슷하게 surface Ambient가 있다. 모든 물체가 이 정도의 에너지를 가진다고 가정하는 것이다. 기본적으로 완전히 빛을 차단하는 것은 지구에서 불가능하다. 난반사로 인해 빛의 세기가 감소하더라도 아주 조금이라도 모든 곳에 닿기 때문이다. 물론.. 2023. 5. 6.
flat, smooth shading 지오메트리의 노말 벡터를 어떻게 주느냐에 따라 결정이 된다. Webgl에서는 geometry안에 각 각의 버텍스마다 노말벡터를 정한다. three.js에서는 필요에 따라 material을 결정하게 된다. three.js에서는 Material에서 falt, smooth shading 설정 값에 따라 각 버텍스의 노말 벡터의 값이 변경되면서 적용됩니다. 예제를 보자. 3개의 구를 만들고 Material은 MeshPhongMaterial을 사용하여 적절한 광원을 계산하도록 한다. Phong Model은 간단하고 빠른 계산을 위해 사용되는 모델이다. 3가지 요소가 있고 이는 diffuse, specular, ambient 값을 계산한다. 그리고 4가지 요소의 벡터를 사용한다. 버텍스의 위치와 버텍스의 노말 벡터.. 2023. 5. 6.
[Canvas] 캔버스 사이즈 설정 캔버스 사이즈 설정. HTML Canvas는 일반적인 HTML 요소와는 다르게 렌더링 방식이 다릅니다. HTML 요소들은 일반적으로 브라우저가 렌더링을 할 때, 요소의 크기와 위치를 계산하고 그에 따라 화면에 그려집니다. 반면에 HTML Canvas는 픽셀 단위로 직접 그리기를 수행하므로, CSS로 지정된 크기와 Canvas의 실제 크기가 다를 경우 브라우저는 Canvas를 재조정하지 않습니다. 따라서 Canvas의 크기가 CSS로 지정된 크기와 다를 경우, Canvas가 재조정되어 물체가 뭉개지는 현상이 발생할 수 있습니다. 이를 방지하기 위해서는 Canvas 요소의 실제 크기를 JavaScript를 사용하여 지정하거나, Canvas 요소의 크기와 CSS 크기를 일치시켜야 합니다. 캔버스의 사이즈를 조.. 2023. 5. 1.
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.
웹 이미지. 크게 비트맵과 벡터라는 개념으로 나뉜다. 우선 비트맵은 픽셀들이 모여 만들어진 정보의 집합으로 레스터(Raster) 이미지라고도 부른다.. gif,. png,. jpeg 등이 있다. 반대로 점, 선, 면의 위치, 색상 등 수학적 정보의 형태로 이루어진 이미지를 말하며 .svg 등이 있다. 비트맵은 정교하고 다양한 색상을 자연스럽게 표현할 수 있다. 다만 확대/축소 시 계단 현상, 품질이 저하된다. 벡터 이미지는 확대/ 축소에서 자유롭고 용량 변화가 없다. 다만 정교한 이미지를 표현하기는 어렵다. 왜냐하면 벡터 이미지는 점,선,면으로 구성되어 있어 사진과 같은 것을 표현하는 건 어려움이 있다. 그래서 보통 로고나, 아이콘들은 벡터 이미지를 많이 사용하며 복잡한 백그라운드, 제품 사진 등은 레스터 이미지를 .. 2023. 4. 22.

티스토리툴바