Dev/web3D10 애니메이션의 적용으로 3D는 완성된다 / babylon.js 애니메이션 적용하기 / 카메라 이동 애니메이션 저번 포스팅까지 우리는 3D 월드 안에 메쉬로 집을 지어봤당! 이 때 기본으로 설정한 카메라를 통해 자동으로 카메라 시점을 바꿀 수 있었는데, 오늘은 프레임 단위로 애니메이션을 적용하여 자동으로 카메라 시점을 바꿔 1인칭으로 움직이는 것 처럼 만들어보아따 그럼 시작! 만들고자 하는 애니메이션에 대한 구상 일단 이 애니메이션 적용에서 부터는 공식 문서의 특정한 예제를 보고 따라한 것이 아니어따..! 그래서 구글링 한 오픈소스들을 기반으로 나도 이런걸 만들어봐야겠다 혼자 구상하고 구현해야 했기 때문에 어떤 장면을 만들건지 미리 생각을 해야했다 내가 만드려고 한건 저번 시간까지 만든 집을 조금 업그레이드 해서, 문을 달고 그 문이 열리면서 집 안으로 들어가는 화면! 비슷한 화면을 다른 사람이 구현한 코드에서 .. 2023. 1. 7. 드디어 무언가를 지어보자 / createMesh 로 메쉬 생성 / material 과 texture 설정 저번 시간까지 기본적인 프로젝트 구조를 잡았기 때문에, 드디어 오늘 메쉬를 생성해 볼 수 있게 되어따 실제 프로젝트에서는 외부에서 메쉬를 import 해와서 사용할 것 같지만, 직접 기본적인 메쉬를 생성하며 개념도 이해할 수 있고 또 이 예제를 푸는 당시에는 블렌더를 다룰 줄 몰랐기 때문에 일단 직접 만들어 보는 것으로! ground mesh 생성, material 적용 const createScene = () => { // ... // built-in ground 생성 let ground = CreateGround("ground", { width: 6, height: 6 }, scene); let groundMaterial = new StandardMaterial("Ground Material", sc.. 2023. 1. 4. 리액트와 babylon.js / 랜섬웨어도 아니고 암호화폐도 아닌 3D 라이브러리 바빌론.. 저번 WebGL 정리 글에서 말했듯, 3D 를 공부하게 된 계기가 babylon.js 이다보니 본격적으로 바빌론 공부를 시작하게 됐담 바닐라 JS 로 따라갔던 예제와 다르게, 바빌론을 시작하면서부터는 개발팀에서 주로 사용하는 리액트를 이용하여 프로젝트를 세팅했다 Babylon.js 간단 정리 바빌론은 마이크로 소프트에서 개발된 웹브라우저에서 3D 그래픽을 표시하기 위해 Javascript 를 사용하는 실시간 3D 엔진이다. 다른 엔진들과 비슷하게, 모델을 구현하기 위해서는 scene, camera, light 세 요소가 필수적으로 필요하다 여기에 추가로 바빌론을 코드에서 구현할 때는 engine 이라는 것이 필요한데, 이 engine 은 WebGL 과 같은 low-level API 와의 인터페이스를 담당.. 2023. 1. 2. 바빌론 그 대장정의 시작 / WebGL 부터 조져보자 / WebGL 개념과 2D 구현을 예시와 함께 진행중이던 프로젝트가 기획부터 다시 들어가게되어 개발 일정이 조금 붕 뜨게되었다 그래서 추후 개발 예정인 웹 3D 관련해서 공부를 시작! 쫌쫌따리 커밋남기고 메모했던 내용 블로그에 남겨보쟈르 WebGL 개념 1. 기초 WebGL은 2D 및 3D 그래픽을 렌더링하기 위한 로우 레벨 javascript 라이브러리. 3D API 라기보다는 레스터화 엔진에 가까움. WebGL 로 그래픽 작업을 수행하려면 점, 선을 그리고 텍스쳐를 구현하는 코드를 작성해야함. (3D API 는 장면, 카메라, 조명 등을 선언하고 라이브러리 내장 메서드로 그래픽을 바로 구현해 낼 수 있음.) → 레스터화 : 벡터 그래픽 형식의 이미지를 레스터 이미지(픽셀, 점, 선 등 도형으로 표현되는 이미지)로 변환하는 과정 WebGL은 GPU.. 2022. 12. 20. 이전 1 2 다음
