FrontEnd/THREE.js11 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. 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. 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. 추적하기. 개발을 하면서 수학에 대해 중요성은 알았지만 직접 수학을 이용하는 도메인이 아니기 때문에 접할 수 있는 경험이 매우 적었다. 그래서 수학을 공부하려는데 그냥 하면 재미없으니까 이를 약간 코드로 적용시켜 시각적으로 보면서 공부하려고 한다. 이번에는 벡터을 공부하고 매우 쉬운 예제 코드를 만들어보았다. 벡터의 뺄셈을 통해 방향을 얻고 이를 방향 벡터로 만들면 렌더링 과정에서 지속적으로 target에 대한 방향을 얻을 수 있다. 만약 각 벡터 간의 거리를 얻고 싶다면 피타고라스 정리를 사용하면 된다. 이를 경찰과 도둑이라는 컨셉으로 만들어 보자. 우선 경찰을 만든다. const geometry = new THREE.BoxGeometry( 5, 5, 5 ); const police = new THREE.Mesh.. 2023. 3. 22. 이전 1 2 다음
