그때는 맞는 줄 알았다. 어디서 헷갈렸는지 적어 둔다.
uniforms는 대기의 구체 형태와 크기를 만든다.
구체를 만들고 대기의 색을 바꾼다면, Geometry와 uniforms는 각각 어떤 역할을 할까?
Geometry는 물체의 형상을 나타내는 꼭짓점 등의 데이터를 담고, uniforms는 셰이더에 전달하는 값이다. 구체의 형태는 SphereGeometry 같은 기하 데이터로 만들 수 있다.
크기나 색을 나타내는 값과, 형상 자체의 데이터를 혼동했다. 셰이더가 uniform 값을 이용해 꼭짓점을 움직일 수는 있지만 uniforms 자체가 구체를 만드는 기능은 아니다.
Three.js ShaderMaterialkey는 변경된 부분만 리렌더링하기 위한 값이다.
key가 같은 B서점 위에 새 결과가 추가됐다. 마우스를 움직이지 않고 클릭하면 반드시 B서점이 선택될까?
key는 형제 목록 안에서 항목의 정체성을 구분한다. React는 위치·타입·key를 바탕으로 컴포넌트 상태를 보존하거나 초기화한다. key만으로 리렌더링이나 항목의 화면 이동이 막히지는 않는다.
컴포넌트의 정체성, 렌더링 여부, 화면의 좌표를 하나의 문제로 생각했다. 검색 결과가 위에 추가되면 key가 같아도 포인터 아래의 항목은 달라질 수 있다.
React 상태 보존과 초기화Three.js support 3D web development, as moduling WebGL or WebGPU.
Three.js가 어떤 도움을 주는지, 정답을 보기 전에 영어 한 문장으로 말해 보자.
Three.js supports 3D web development by making WebGL or WebGPU easier to use.
Three.js는 단수 주어라 supports를 쓴다. ‘더 쉽게 사용할 수 있게 해서’라는 방법은 by making … easier to use로 표현한다. by 앞의 쉼표는 이 문장에서는 필요하지 않다.
Three.js, WebGL·WebGPU, GPU를 각각 ‘도구·창구·처리 장치’에 연결해 보자.
WebGL은 OpenGL ES를 웹에 맞춘 그래픽 API다. WebGPU는 W3C에서 여러 회사가 함께 설계하는 API로, 현대 GPU의 그래픽과 일반 계산 기능을 웹에서 이용하도록 한다.
WebGPU를 OpenGL의 단순한 개량판으로 생각하면 명령 준비 방식과 compute 기능의 차이를 놓치기 쉽다. 두 API는 브라우저가 GPU에 작업을 맡기는 창구라는 역할을 공유한다.
WebGPU 설계 설명같은 구체를 나무와 금속처럼 보이게 만들 때, 바꿀 데이터와 속성은 무엇일까?
Texture는 표면에 입힐 이미지나 수치 데이터를 담는다. Material은 색상, 빛에 반응하는 방식, 거칠기와 금속성 등 표면을 표현하는 규칙과 설정을 다룬다. 사용하는 Material 종류에 따라 지원하는 속성이 다르다.
입문 때는 Texture를 표면의 이미지로 기억해도 좋다. 이후 거칠기·법선 같은 정보도 텍스처에 담을 수 있다는 점으로 넓혀 가면 된다.
Three.js MeshStandardMaterial‘다시 설명해 볼 것’은 아직 혼자 설명하는 데까지 확인하지 못한 내용.