# 오브젝트를 업데이트하는 방법([name])

모든 오브젝트들은 기본적으로 자동으로 장면에 추가됐을 때 자신들의 행렬구조를 업데이트합니다.

`const object = new THREE.Object3D(); scene.add( object );` 혹은 다른 오브젝트의 자식으로 장면에 추가될 때도 마찬가지입니다. `const object1 = new THREE.Object3D(); const object2 = new THREE.Object3D(); object1.add( object2 ); scene.add( object1 ); //object1과 object2는 자동으로 자신들의 행렬구조를 업데이트할 것입니다.`

하지만 오브젝트가 고정되어야 한다면, 이 설정을 풀고 수동으로 행렬구조를 갱신할 수 있습니다.

`object.matrixAutoUpdate = false; object.updateMatrix();`

## BufferGeometry

BufferGeometries는 [page:BufferAttribute buffers]에 다양한 정보(꼭짓점 위치, 면 순서, 법선, 색깔, UV, 모든 커스텀 속성들)를 저장합니다. - 이는 [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays typed arrays]라는 의미입니다. 이는 기본 Geometries보다 빠르게 작동하지만, 그 대신 작업하기가 더 어렵습니다.

BufferGeometries를 업데이트 하는 것과 관련해서, buffers의 크기를 조절할 수 없다는 것을 이해하는 것이 가장 중요합니다. (작업이 아주 어렵기 때문에, 새 geometry를 만드는 수준입니다). 그 대신에 buffers의 내용을 변경할 수 있습니다.

이는 곧 만약 BufferGeometry의 속성이 증가할 것이라고 예측이 된다면, 예를 들어 꼭짓점의 갯수라면, 만들어질 수 있는 새로운 꼭짓점들을 담을 수 있는 충분한 buffer를 미리 준비해 놓아야 합니다. 물론 이는 당신이 사용할 BufferGeometry의 상한치가 있을 것이라는 뜻이기도 합니다 - 효율적으로 무한대로 확장되는 BufferGeometry를 만드는 방법은 없습니다.

렌더링 시점에 확장되는 선을 예로 들어보겠습니다. buffer에는 500 개의 꼭짓점을 할당하겠지만 처음에는 [page:BufferGeometry.drawRange]를 이용해 두 개만 그릴 것입니다..

`const MAX_POINTS = 500; // geometry const geometry = new THREE.BufferGeometry(); // attributes const positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) ); // draw range const drawCount = 2; // draw the first 2 points, only geometry.setDrawRange( 0, drawCount ); // material const material = new THREE.LineBasicMaterial( { color: 0xff0000 } ); // line const line = new THREE.Line( geometry, material ); scene.add( line );`

그 다음, 아래와 같은 패턴으로 무작위로 선에 점을 생성해 줄 것입니다:

`const positions = line.geometry.attributes.position.array; let x, y, z, index; x = y = z = index = 0; for ( let i = 0, l = MAX_POINTS; i < l; i ++ ) { positions[ index ++ ] = x; positions[ index ++ ] = y; positions[ index ++ ] = z; x += ( Math.random() - 0.5 ) * 30; y += ( Math.random() - 0.5 ) * 30; z += ( Math.random() - 0.5 ) * 30; }`

첫 렌더링 이후에 점의 갯수를 변경하고 싶다면, 다음과 같이 실행하세요:

`line.geometry.setDrawRange( 0, newValue );`

첫 렌더링 이후에 position 데이터 수치를 변경하고 싶다면, needsUpdate 플래그를 다음과 같이 설정해야 합니다:

`line.geometry.attributes.position.needsUpdate = true; // required after the first render`

첫 렌더링 이후에 position 데이터 수치를 변경한다면, bounding volumes를 재계산해서 다른 엔진의 절두체 컬링 혹은 헬퍼같은 특성들이 적절히 작동하도록 해야합니다.

`line.geometry.computeBoundingBox(); line.geometry.computeBoundingSphere();`

[link:https://jsfiddle.net/t4m85pLr/1/ Here is a fiddle] showing an animated line which you can adapt to your use case.

### Examples

[example:webgl_custom_attributes WebGL / custom / attributes]
[example:webgl_buffergeometry_custom_attributes_particles WebGL / buffergeometry / custom / attributes / particles]

## 재질(Materials)

모든 uniforms 값들은 자유롭게 변경이 가능합니다. (예를 들면 colors, textures, opacity, etc), 값들은 shader에 매 프레임 전송됩니다.

GLstate와 관련된 파라미터들 또한 언제나 변경 가능합니다.(depthTest, blending, polygonOffset, 등).

아래 속성들은 런타임에서 쉽게 변경할 수 없습니다. (적어도 재질이 한 번 렌더링 된 이후):

- uniforms의 갯수와 타입
- 아래 항목들의 사용 혹은 비사용 여부
  - texture
  - fog
  - vertex colors
  - morphing
  - shadow map
  - alpha test
  - transparent

이러한 것들은 새로운 shader 프로그램 생성이 필요합니다. 다음과 같이 설정합니다.

`material.needsUpdate = true`

이 기능은 매우 느리고 프레임이 끊겨보일 수 있다는 점(특히 Windows처럼, shader 편집이 DirectX에서 OpenGL보다 느린 경우)을 명심해주세요.

좀 더 부드럽게 하기 위해서는, 값이 0인 빛, 흰색 텍스쳐, 밀도가 0인 안개 등의 "가상" 값을 가지도록 특성들을 변경해 시뮬레이션해 볼 수 있습니다.

기하학 블록에 사용되는 재질을 자유롭게 바꿀 수 있지만, 오브젝트를 어떻게 블록으로 나눌 지에 대한 점은 변경할 수 없습니다(재질의 면에 따라).

### 런타임 중에 재질의 서로 다른 설정을 해야 할 때:

재질과 블록의 수가 적다면, 오브젝트를 미리 분리해놓을 수 있습니다. (예를 들면 사람에 있어서 머리/얼굴/상의/바지, 자동차에 있어서 앞부분/옆부분/윗부분/유리/타이어/내부).

수가 많다면 (예를 들어 모든 얼굴들이 조금씩 다른 경우), 다른 해결 방법을 생각해봐야 하는데, 속성/텍스쳐를 사용하여 얼굴마다 다른 형태를 입히는 방법 등이 있을 것입니다..

### 예제

[example:webgl_materials_car WebGL / materials / car]
[example:webgl_postprocessing_dof WebGL / webgl_postprocessing / dof]

## 텍스쳐

사진, 그림, 영상 및 데이터 텍스쳐를 변경했다면 다음과 같은 플래스 설정이 필요합니다:

`texture.needsUpdate = true;`

대상이 자동으로 렌더링되도록 업데이트하기.

### 예제

[example:webgl_materials_video WebGL / materials / video]
[example:webgl_rtt WebGL / rtt]

## 카메라

카메리 위치와 대상은 자동으로 업데이트됩니다. 만약 변경을 원한다면

- fov
- aspect
- near
- far

이후에 투영되는 행렬구조를 다시 계산하면 됩니다.

`camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix();`