webgpu obj 파일 load하기 + parcel 시작하기, 적용 사용방법

 

webgpu를 공부하면서 cloth simulation 툴을 만들고자 합니다.
우선 typescript로 webgpu 세팅을 완료하였고
object를 load하는 코드부터 작성하고 있습니다.

box obj test

box object를 가지고 잘 나오는지 테스트를 해볼까

뭐냐 이게. 저 멀리 작디작게 픽셀이 보인다.

카메라가 너무 멀리 있어서 그런 것 같아 카메라를 당겨보자.

카메라 위치를 조정하니 잘 나오긴 한다.

근데 왜 스탠포드 토끼 오브젝트는 안될까

저장 시 페이지 refresh 가능하도록 세팅

일단 계속 bundle로 빌드하는게 귀찮다. bundle 방식 말고,

"webpack serve --progress” 같이 webpack을 사용해볼까?

 

일단 carmen씨 프로젝트의 package.json을 보자.

{
  "name": "cloth_simulator",
  "version": "1.0.0",
  "description": "A simulator for cloth.",
  "author": "Carmen Cincotti <ccincotti3@gmail.com>",
  "license": " GPL-3.0-only",
  "private": true,
  "scripts": {
    "start": "parcel src/index.html",
    "build": "parcel build"
  },
  "dependencies": {
    "gl-matrix": "^3.4.3",
    "yarn": "^1.22.22"
  },
  "devDependencies": {
    "@webgpu/types": "^0.1.17",
    "parcel": "^2.5.0",
    "parcel-reporter-static-files-copy": "^1.3.4",
    "typescript": "^4.6.4"
  }
}

보아하니 parcel을 사용하고 있었다.

 

https://velog.io/@subin1224/Parcel-vs-Rollup-vs-Webpack-비교

Parcel vs Rollup vs Webpack 비교

 

각각 어떤 장점이 있는지 다른 분이 정리해놓은 포스팅을 한 번 읽어보고 정해보자.

Parcel	Rollup	Webpack
설정 필요없음 속도 빠름	ES6 모듈 형식으로 빌드할 수 있어서 라이브러리나 패키지에도 활용 가능 기능이 많은 만큼 복잡해지기도 함	설정 까다로움 다른 서드파티와 함께 쓸 때 적합

 

이렇게 정리해 보니 단순히 개발할 때 쓰기 위해서는 parcel이 압도적으로 좋아 보인다.

webpack은 좀 구식? 느낌이다. Rollup은 당장에는 필요없어서 괜찮고.

 

parcel을 사용하도록 하자.

Parcel 도입하기

https://ko.parceljs.org/getting_started.html

🚀 시작하기

 

yarn으로 설치할수도 npm으로 설치할 수도 있는데 난

깔끔하게 npm으로 통일한다

 

npm i parcel-bundler

 

설치했으니 index.html와 index.js를 만들란다.

 

npx parcel [index.html의 경로]

 

참고로 나는 parcel-bundler를 global로 설치하지 않았는데, npx를 사용하면 로컬에 설치되어있는 패키지에 대해 명령어를 사용할 수 있다.

 

---

---

테스트 해보니 ctrl+S를 누르면 바로 적용되는걸 볼 수 있다. ㅎ

 

기존에는 webpack을 이용한 bundle을 이용했었는데, 배포보단 장기적으로 개발할 예정이기 때문에 webpack과 빌드했던 bundle들을 삭제하고 진행하자.

 

npm uninstall webpack webpack-cli