본문 바로가기

Graphics

[playcanvas] camera Camera 기본 카메라 코드 메모 // Camera this.camera = new pc.Entity(); this.camera.name = 'cameraEntity'; this.camera.addComponent('camera', { clearColor: new pc.Color(0.1, 0.2, 0.3) }); this.camera.setPosition(0, 0, 5); this.camera.enabled = true; app.root.addChild(this.camera); 더보기
[playcanvas] Asset 로드에 대한 모든것 플레이캔버스에서 Asset을 로드하며서 알게된 것들 플레이캔버스 상에서는 material도 texture도 json model도 모두 Asset입니다. Asset 과 Asset.resource는 다르다 일반적으로 Material를 입힐땐, Asset.resource를 사용하지만, 큐브맵이나 2D 이미지를 적용할때는 Asset 자체를 사용한다. Asset은 에셋 타입이고 Asset.resource는 그 해당 리소스의 타입을 따라간다. 예를들어 아래 코드처럼 Asset.resource가 texture타입이면 Asset.resource 도 텍스쳐 타입이된다. Asset은 load하지 않아도 사용할수 있고, Asset.resource는 load해야 사용할수 있다. // 에셋 생성 코드 const asset = .. 더보기
[webgl] Hello World 중요한것은 버텍스 쉐이더와 프래그먼트 쉐이더 그리고 GPU는 어떤함수를 호출해서 이 두개의 함수를 호출. 버텍스 쉐이터: 공간좌표 프레그먼트쉐이더: 색상 버텍스 쉐이더 (GLSL) 함수를 작성해보자 결국 GPU가 이것을 호출하니깐, 버텍스 쉐이터 #version 300 es // 이거있어야 WebGL2 // GPU가 버텍스쉐이더를 실행하는데 사용되는 데이터 // (는 버퍼를 통해 받아서 여기에 저장 해놓을거임) in vec4 a_position; // 대충 점의 위치임 // 모든 쉐이더는 main 함수를 가지고 있습니다. void main() { // gl_Position는 버텍스 쉐이더의 미리정의되어 있는 내장 변수입니다. // 여기에 값을 넣어주면 버텍스 쉐이더에서 쓸 준비 끝! gl_Position.. 더보기
[playcanvas] Delete all child entities // Good code const cnt = someEntity.children.length; for (let i = 0; i < cnt; i++) { let child = someEntity.children.pop(); child.destroy(); } child.destroy() 하면 someEntity.children 리스트에서 없어진다. 그니깐 그냥 생각없이 for 문안에 length 를 놓으면 당연히 안된다 왜냐면 리스트의 길이가 루프돌때마다 변하기 때문이다. 아래와 같이하면 안됨. // Bad code for (let i = 0; i < someEntity.children.length; i++) { let child = someEntity.children[i] child.destroy(); }.. 더보기
[playcanvas] loadFromUrl 에 대한 고찰 https://developer.playcanvas.com/en/api/pc.AssetRegistry.htm pc.AssetRegistry | PlayCanvas API Reference pc.AssetRegistry Extends: pc.EventHandler Container for all assets that are available to this application Summary Properties prefixA URL prefix that will be added to all asset loading requests. Methods addAdd an asset to the registry filterReturn all Asset developer.playcanvas.com 이거 여러가지 차이점.. 더보기
[webgl] 기초 이젠 WebGL 하면 대부분 WebGL2 말하는거임 WebGL은 GPU로 돌림(내장GPU 또는 외장 GPU) WebGL은 GPU에서 GLSL 타입으로 두개의 함수를 돌리면서 작동함 vertex shader: 점, 선, 원시형태(primitives)를 그림(rasterize) fragment shader: 픽셀에 색상을 칠함(계산함) GPU에서 GLSL로 작성된 어떤 함수를 호출하여 저 위에 두개의 함수(합쳐서 프로그램이라고 함)를 호출 gl.drawArrays() { run vertex shader () run fragment shader () } 뭐 대충 이런느낌인듯 GPU에서 실행하니깐 이 함수들의 자원(데이터, 변수) 들도 GPU에 있어야함 GPU에 데이터를 제공하는 법 == 쉐이더(함수)가 데이터.. 더보기