그래픽스

[2D WebGL][pixiJS] Renderer, Ticker, & Stage

https://youtu.be/2J0VUiozAVM 코드 수정전 코드 수정 후

[Spine][pixiJs] Api 사이트

스파인 api 사이트 http://ko.esotericsoftware.com/spine-api-reference#AnimationState-setAnimation 찾기 기능 이용해서 api 명세 확인, 번역기라도 돌려서… 이런식으로 AnimationState Methods addAnimation ( int trackIndex, string animationName, bool loop, float delay): TrackEntry Queues an animation by name. See addAnimation. addAnimation ( int trackIndex, Animation animation, bool loop, float delay): TrackEntry Adds an animation to ..

[2D WebGL][pixi.Js] 세부사항

PixiJS : 아키텍처 개요 PixiJS: Architecture Overview pixijs.io 아키텍처 개요 PixiJS가 어떻게 결합되는지에 대한 개요 코드 PixiJS는 GitHub에서 호스팅되는 오픈 소스 제품 GitHub 리포지토리와 마찬가지로 각 PixiJS 클래스의 원시 소스 파일을 찾아 다운로드 할 수있을뿐만 아니라 기존 문제 및 버그를 검색하고 직접 제출할 수도 있다. PixiJS는 TypeScript라는 JavaScript 변형으로 작성되었으며, 사전 컴파일 단계를 통해 JavaScript에서 유형 검사를 할 수 있다. 구성 요소 PixiJS는 모듈식 렌더링 엔진. 콘텐츠를 생성, 업데이트 및 표시하는 데 필요한 각 작업은 자체 구성 요소로 나뉜다 이렇게 하면 코드가 더 깔끔해질 ..

[2D WebGL][pixiJS] Getting Started!

https://youtu.be/GuY_PROTr0I: 참고영상 코드

[2D WebGL][pixiJS] Architecture Overview

PixiJS 응용 프로그램의 구성 요소 HTML 파일 만들기 웹 서버를 사용하여 파일 제공 PixiJS 라이브러리로드 응용 프로그램 만들기 생성 된보기를 DOM에 추가 스테이지에 이미지 추가 업데이트 루프 작성 파일 제공 PixiJS로 로컬로 개발하려면 웹 서버를 실행해야합니다. 웹 브라우저는 로컬로 로드된 웹 페이지에 로컬 파일(예: 이미지 및 오디오 파일)을 로드하지 못하도록 합니다. 새 HTML 파일을 두 번 클릭하기만 하면 PixiJS 단계에 스프라이트를 추가하려고 할 때 오류가 발생합니다. XAMPP 또는 http-server Node.js 패키지를 사용하여 파일을 쉽게 제공 할 수 있습니다. 선택한 브라우저를 열고 위치 표시 줄에 입력하여 모든 것이 작동하는지 테스트하십시오. (몽구스는 기본적..

[3D WebGL][three.js] three.js 프로젝트 시작해보기

Three.js – JavaScript 3D Library (threejs.org) Three.js – JavaScript 3D Library threejs.org BUILD 안에서 html안에 스크립트로 넣는 스타일로 작성하려면 js 혹은 min.js(js와 같은데 압축 버전일 뿐), 모듈 방식을 쓴다면 module.js를 사용하면 된다. 장면 만들기 – three.js docs (threejs.org) three.js docs threejs.org 위 링크에 기재되어 있는 예제링크 모듈 방식 : 똑같은 결과 npm i three

WebGL이란, three.js란, pixi.js란

WebGL이란 무엇인가(+ HTML Canvas, WebGL 기초) (tistory.com) WebGL이란 무엇인가(+ HTML Canvas, WebGL 기초) 이 글에 들어가기 앞서, 혹시 화려한 애니메이션만 보고 흥미를 가졌다면, 한 가지를 더 생각하면 좋을 거 같다. 예상했겠지만 수학이다. 결국 3D 그래픽은 세 개의 좌표를 선으로 연결해서 입 code-masterjung.tistory.com WEB GL은 웹상에서 그래픽을 표현할 때 쓰는 라이브러리이다. 자바스크립트 언어로 쓰이며 2D와 3D 그래픽을 표현할 수 있다. WEB GL은 GPU를 이용해서 그림을 그리기 때문에 성능면에서 유리함이 있다. 특히 웹상에서 3D로 그려지는 것들은 WEB GL로 그려졌다고 봐도 무방한데, WEB GL API들..