[WebGL2-My Cosmos-02] Canvas 공통 설정

[WebGL2-My Cosmos-02] Canvas 공통 설정

이전 글 : [WebGL2-My Cosmos-01] 프로젝트 세팅 [WebGL2-My Cosmos-01] 프로젝트 세팅프로젝트 아이디어WebGL2로 웹에서 3D 그래픽을 구현하고자 내가 좋아하는 우주를 배경으로 시작하고 싶었다.입력한 이름이 은하모양으로 구성되면 재미있을 것 같다는 생각을 했다.홈 화면 - 이jinsk-joy.tistory.com Canvas 공통 설정홈과 코스모스 화면에서 모두 canvas를 사용하므로, 캔버스 크기 및 기본 설정을 관리하는 CanvasOption 클래스를 생성하였다. 생성자와 멤버변수홈화면과 코스모스 화면 둘 다 canvas 태그를 사용하므로 고유의 id를 받아와 각 화면에 맞는 canvas element를 가져온다. 만약 해당 요소가 존재하지 않을 경우 에러를 발생시..

  • format_list_bulleted WebGL2/My Cosmos 프로젝트
  • · 2025. 3. 9.
  • textsms
[WebGL2-My Cosmos-01] 프로젝트 세팅

[WebGL2-My Cosmos-01] 프로젝트 세팅

프로젝트 아이디어WebGL2로 웹에서 3D 그래픽을 구현하고자 내가 좋아하는 우주를 배경으로 시작하고 싶었다.입력한 이름이 은하모양으로 구성되면 재미있을 것 같다는 생각을 했다.홈 화면 - 이름 입력 / 코스모스 화면 - 입력한 이름으로 이루어진 은하 생성으로 큰 방향을 잡았다. 홈의 배경화면에도 WebGL2를 사용하여 효과를 주고 싶었기에 iframe 태그를 이용하기로 하였다. index.html 파일에 홈 화면과 코스모스 화면의 요소가 같이 들어있다.두 화면 모두 WebGL2를 사용해야 하므로 WebGL2로 렌더링 되는 배경과 UI요소를 분리하면 UI 변경과 배경이 서로 영향을 주지 않아 유지보수가 편해지며 다른 화면에서도 재사용이 가능해 확장성도 높아진다. 프로젝트 세팅프로젝트 세팅은 이전에 써놓은..

  • format_list_bulleted WebGL2/My Cosmos 프로젝트
  • · 2025. 3. 9.
  • textsms
[Canvas-불꽃놀이-33] index.js 통합 테스트

[Canvas-불꽃놀이-33] index.js 통합 테스트

이전 글 : [Canvas-불꽃놀이-32] Canvas 클래스 단위 테스트 (애니메이션) [Canvas-불꽃놀이-32] Canvas 클래스 단위 테스트 (애니메이션)이전 글 : [Canvas-불꽃놀이-31] Canvas 클래스 테스트 (파티클 업데이트) [Canvas-불꽃놀이-31] Canvas 클래스 테스트 (파티클 업데이트)이전 글 : [개발/Canvas] - [Canvas-불꽃놀이-30] Canvas 클래스 테스트 (파jinsk-joy.tistory.com 화면 전환 및 애니메이션 제어를 위한 index.js의 통합 테스트 index.js 통합 테스트마지막으로 index.js의 통합 테스트를 진행하여 모든 테스트를 마무리하려 한다.index.js 파일은 전체 프로젝트 초기화, 이벤트 리스너, DOM..

  • format_list_bulleted Canvas/불꽃놀이 프로젝트
  • · 2024. 12. 21.
  • textsms
[Canvas-불꽃놀이-32] Canvas 클래스 단위 테스트 (애니메이션)

[Canvas-불꽃놀이-32] Canvas 클래스 단위 테스트 (애니메이션)

이전 글 : [Canvas-불꽃놀이-31] Canvas 클래스 테스트 (파티클 업데이트) [Canvas-불꽃놀이-31] Canvas 클래스 테스트 (파티클 업데이트)이전 글 : [개발/Canvas] - [Canvas-불꽃놀이-30] Canvas 클래스 테스트 (파티클 생성) [Canvas-불꽃놀이-30] Canvas 클래스 테스트 (파티클 생성)이전 글 : [Canvas-불꽃놀이-29] Canvas 클래스 단위 테스트 (텍스jinsk-joy.tistory.com  애니메이션과 렌더 테스트 Canvas 애니메이션과 렌더 테스트이제 마지막 관문인 애니메이션과 렌더에 대한 테스트를 진행하겠다.애니메이션 테스트를 진행할 때 requestAnimationFrame에 관련된 테스트를 하느라 여러 오류가 있었다. 종..

  • format_list_bulleted Canvas/불꽃놀이 프로젝트
  • · 2024. 12. 19.
  • textsms
[Canvas-불꽃놀이-31] Canvas 클래스 단위 테스트 (파티클 업데이트)

[Canvas-불꽃놀이-31] Canvas 클래스 단위 테스트 (파티클 업데이트)

이전 글 : [개발/Canvas] - [Canvas-불꽃놀이-30] Canvas 클래스 테스트 (파티클 생성) [Canvas-불꽃놀이-30] Canvas 클래스 테스트 (파티클 생성)이전 글 : [Canvas-불꽃놀이-29] Canvas 클래스 단위 테스트 (텍스트 데이터 생성) [Canvas-불꽃놀이-29] Canvas 클래스 단위 테스트 (텍스트 데이터 생성)이전 글 : [Canvas-불꽃놀이-28] Canvas 클래스 단위 테jinsk-joy.tistory.com Tail, Text, Circle, Spark 파티클 업데이트 테스트 파티클 업데이트 테스트파티클 생성에 대한 테스트를 진행했으니 이제 업데이트에 대한 테스트를 진행하도록 한다.각 파티클 타입의 업데이트가 의도한 대로 이루어지는지 검증한다..

  • format_list_bulleted Canvas/불꽃놀이 프로젝트
  • · 2024. 12. 19.
  • textsms
[Canvas-불꽃놀이-30] Canvas 클래스 단위 테스트 (파티클 생성)

[Canvas-불꽃놀이-30] Canvas 클래스 단위 테스트 (파티클 생성)

이전 글 : [Canvas-불꽃놀이-29] Canvas 클래스 단위 테스트 (텍스트 데이터 생성) [Canvas-불꽃놀이-29] Canvas 클래스 단위 테스트 (텍스트 데이터 생성)이전 글 : [Canvas-불꽃놀이-28] Canvas 클래스 단위 테스트 (초기화) [Canvas-불꽃놀이-28] Canvas 클래스 단위 테스트 (초기화)이전 글 : [Canvas-불꽃놀이-27] CanvasOption 클래스 단위 테스트 [Canvas-불꽃놀이jinsk-joy.tistory.com  Tail, Text, Circle, Spark의 생성 테스트Tail, Text, Circle, Spark 파티클 생성 테스트Canvas 클래스에서 애니메이션을 진행할 파티클들의 생성이 잘 이루어지는지 검증하도록 한다.  Ca..

  • format_list_bulleted Canvas/불꽃놀이 프로젝트
  • · 2024. 12. 19.
  • textsms