본문 바로가기

Dev/graphics

[playcanvas] Entity 드래그하기 마우스로 클릭하고 드래그하는 기능을 구현해보겠습니다. 드래그를 구현하기 위해서 ray란 걸 이용할겁니다. var Raycast = pc.createScript('raycast'); Raycast.attributes.add('cameraEntity', {type: 'entity', title: 'Camera Entity'}); Raycast.attributes.add('dragEntity', {type: 'entity', title: 'Drag Entity'}); Raycast.prototype.initialize = function() { this.ray = new pc.Ray(); this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onMouseDown, this); this... 더보기
[math] 벡터의 정규화란 그래픽에서 벡터는 유클리디안 벡터임(Euclidean vector == geometric vector) 일반적으로 벡터는 화살표로 표현함(화살표로 추상화 시키는거임 왜냐면 그래도 모든 성질을 만족하고 직관도 생기기때문) 간단히 프로그래밍에서 벡터를 사용하는 이유는 2차원에서 공튕기는 프로그램을 짤때 var x = 100; var y = 100; var xSpeed = 1; var ySpeed = 3.3; // 움직임 x = x + xSpeed; y = y + ySpeed; 이였던것을 간단히 아래와 같이 작성할수 있기 때문입니다. var position = new PVector(100,100); var velocity = new PVector(1,3.3); position = position + veloc.. 더보기
[playcanvas] Entity up, right, forward 선 2줄요약: 1. Entity에는 up, right, forward 속성이 있습니다. 2. 모델의 중심 0,0,0 에서 각 축 (무한크기의) 벡터를 단위벡터로 리턴합니다. Entity는 pc.GraphNode를 상속받기 때문에 up, right, forward 속성들을 사용할수 있습니다. up: The normalized local space Y-axis vector of the graph node in world space right: The normalized local space X-axis vector of the graph node in world space forward: The normalized local space negative Z-axis vector of the graph node.. 더보기
[playcanvas] Entity Picking을 이용해본 Gizmo 형태 https://velbi.io/154 이 글을 번역하면서, 스스로 익히기위해 Entity Picking을 사용해 Gizmo 형태만 한번 만들어 봤습니다. (나중에 Drag도 추가해보겠습니다.) 클릭하면 흰색으로 바뀌게 했습니다. 에디터에서 카메라에 picker 스크립트컴포넌트를 등록하고 거기에 picker.js 를 넣어놨습니다. 그리고 각 엔티티에다가는 changeColor.js 를 넣어놨습니다. picker.js var Picker = pc.createScript('picker'); // initialize code called once per entity Picker.prototype.initialize = function() { this.app.mouse.on(pc.EVENT_MOUSEDOWN, t.. 더보기
[playcanvas] Material with texture in glTF (engine only) playcanvas engine only 1. Make Material with texture in glTF public loadWheel(entityName: string, folderName: any, partName: any, materialAsset: boolean) { const targetEntity = this.app.root.findByName(entityName); const part = new pc.Entity(); part.addComponent('model'); part.name = partName; const wheelUrl = `${ environment.apiUrl }/assets/products/${ folderName }/${ partName }/${ partName }.g.. 더보기
[graphics] mesh 란 [mesh란] 근데 mesh라는 개념은 뭐지? mesh는 폴리곤으로 이루어져 있는데.. (폴리곤은 vetices와 edges와 faces로 이루어져있음) 위 링크 그림에서는 메쉬는 같은 폴리곤인 부분인가? ㄴ A polygon mesh is a collection of vertices, edges and faces 메쉬란 어느 부분을 의미하느게 아니라 그냥 방식인것 같다 .. (나중에 위키 제대로 읽어보기) https://en.wikipedia.org/wiki/Polygon_mesh 이문서 꼭 일어보기!!! 일단은 "메쉬란 폴리곤들 ... 을 지칭하는 개념"으로 알고있어야겠다 내 뇌피셜.. [mesh란] 근데 mesh라는 개념은 뭐지? mesh는 폴리곤으로 이루어져 있는데.. (폴리곤은 vetices와 .. 더보기
[graphics] Tessellation과 Polygon Optimization [Polygon Optimization] - 중간화질(이게많이 안떨어지면 좋음) [저용량!] - 웹지엘 같은데로 내보낼때, [Tessellation] - [고화질!] 고용량(이게 많이 안높아지면좋음) - 왜하는거지? 섬세하게 표현하고 싶을때, 화장실 타일 테셀레이션은 단순히 폴리곤의 면적을 잘게 쪼개어 더 많은 버텍스를 갖게 해주는 것일 뿐이고 디스플레이스먼트 매핑은 그 잘게 쪼개인 버텍스의 높낮이를 조절해서 울퉁불퉁한 표면의 굴곡을 만드는 역할이기 때문이다. 이름의 유래는 폴리곤을 삼각형으로 분할해 빠짐없이 메우는 특성 때문으로 보인다. 이 메쉬를 구성하는 단위는 폴리곤인데 폴리곤은 전부 삼각형 모양이기 때문에 메쉬를 구성하는 폴리곤 숫자가 적으면 자연스레 겉면이 울퉁불퉁해지고 어색해진다 (삼각형아닐수.. 더보기
[webgl] 웹지엘 용량 2GB Maximum amount of consumable memory per tab Google 그룹스 groups.google.com Browser storage limits and eviction criteria Browser storage limits and eviction criteria There are a number of web technologies that store data of one kind or another on the client-side (i.e., on your local disk). The process by which the browser works out how much space to allocate to web data storage and what to dele.. 더보기