Three.js: 뢈투λͺ…도 / μž…μž 및 μ„  크기 μ‘°μ •

에 λ§Œλ“  2011λ…„ 06μ›” 27일  Β·  11μ½”λ©˜νŠΈ  Β·  좜처: mrdoob/three.js

μž…μž μ‹œμŠ€ν…œκ³Ό 선이 μžˆμŠ΅λ‹ˆλ‹€. 색상 배열을 λ§Œλ“€κ³  VertexColorsλ₯Ό true둜 μ„€μ •ν•˜μ—¬ μ„ μ˜ 각 꼭지점과 κ°€μž₯자리의 색상을 μ‰½κ²Œ μ„€μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€. λ‚΄ μ§ˆλ¬Έμ€ μ–΄λ–»κ²Œ a) 뢈투λͺ…도 b) μž…μž μ‹œμŠ€ν…œ / μ„ μ—μ„œ 각 정점 / κ°€μž₯자리의 크기λ₯Ό κ°œλ³„μ μœΌλ‘œ μ‘°μ •ν•  수 μžˆμŠ΅λ‹ˆκΉŒ?

감사!

Zenna

Question

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

@WestLangley μ•Œκ² μŠ΅λ‹ˆλ‹€ . 정보에 λŒ€ν•΄μ„œ κ°μ‚¬λ“œλ¦½λ‹ˆλ‹€!

λ°˜λ©΄μ— JS둜 ν•  수 μžˆλ‹€λ©΄ 쒋을 κ²ƒμž…λ‹ˆλ‹€. 특히 μ €λ₯Ό ν¬ν•¨ν•˜μ—¬ 셰이더 언어에 μ΅μˆ™ν•˜μ§€ μ•Šμ€ μ‚¬λžŒλ“€μ—κ²ŒλŠ” λ”μš± κ·Έλ ‡μŠ΅λ‹ˆλ‹€. κ·Έλž˜λ„ λͺ¨λ‘ κ°μ‚¬ν•©λ‹ˆλ‹€!

λͺ¨λ“  11 λŒ“κΈ€

λ‚˜λ„ 이것을 μ•Œκ³  μ‹ΆμŠ΅λ‹ˆλ‹€.

geometry.colors λŠ” 정점을 1x1둜 λ§€ν•‘ν•˜λŠ” λ°°μ—΄μž…λ‹ˆλ‹€. λ”°λΌμ„œ geometry.vertices[ 1 ] 의 색상을 λ³€κ²½ν•˜λ €λ©΄ geometry.colors[ 1 ] 을 μˆ˜μ •ν•΄μ•Όν•©λ‹ˆλ‹€.

μ•ˆλ…•ν•˜μ„Έμš” mrdoob.

geometry.colors [1]은 Three.colorμž…λ‹ˆλ‹€. 색상을 즐겁게 λ³€κ²½ν•  수 μžˆμ§€λ§Œ λ‚΄κ°€ μ•„λŠ” ν•œ 뢈투λͺ…도 값은 μ €μž₯λ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. κ·Έλ ‡λ‹€λ©΄ 단일 정점 / μ„ μ˜ 뢈투λͺ…도λ₯Ό μ–΄λ–»κ²Œ λ³€κ²½ν•  수 μžˆμŠ΅λ‹ˆκΉŒ?

μ–΄ 였...

μ‰½κ²Œ ν•  μˆ˜λŠ” μ—†μŠ΅λ‹ˆλ‹€. 뢈투λͺ…λ„λŠ” μš”μ†Œκ°€ μ•„λ‹Œ μž¬λ£Œλ³„λ‘œ μ§€μ •λ©λ‹ˆλ‹€. μ–Όλ§ˆ 전에 Color μ—μ„œ μ•ŒνŒŒλ₯Ό μ‚­μ œν–ˆμŠ΅λ‹ˆλ‹€.

ν•œ 가지 κ°€λŠ₯ν•œ 방법은 μ‚¬μš©μž μ •μ˜ 속성과 μ‚¬μš©μž μ •μ˜ MeshShaderMaterial ν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€. μ—¬κΈ°μ„œ 4 개의 ꡬ성 μš”μ†Œ 색상이 μžˆμŠ΅λ‹ˆλ‹€.

크기에 λŒ€ν•΄μ„œλ„ λ§ˆμ°¬κ°€μ§€μž…λ‹ˆλ‹€. ν˜„μž¬ κΈ°λ³Έ 속성 및 μž¬μ§ˆμ„ μ‚¬μš©ν•˜μ—¬ μž…μž λ˜λŠ” λΌμΈλ³„λ‘œ λ³€κ²½ν•  μˆ˜μžˆλŠ” 방법이 μ—†μŠ΅λ‹ˆλ‹€. 크기에 λŒ€ν•œ 또 λ‹€λ₯Έ 속성 슀트림이 ν•„μš”ν•˜κ³ μ΄λ₯Ό μ‚¬μš©ν•˜λŠ” μ‚¬μš©μž μ •μ˜ μž¬λ£Œκ°€ μžˆμ–΄μ•Όν•©λ‹ˆλ‹€.

이제 Color μ—μ„œ μ•ŒνŒŒλ₯Ό μ œκ±°ν•˜κΈ°λ‘œ κ²°μ •ν•œ 이유λ₯Ό κΈ°μ–΅ν•  수 μ—†μŠ΅λ‹ˆλ‹€ ...

λ‚˜λ„ 기얡이 λ‚˜μ§€ μ•ŠλŠ”λ‹€. λ‚˜λŠ” 이것을 찾을 수 μžˆμ—ˆλ‹€.

https://github.com/mrdoob/three.js/commit/dc6e335dc9f7f38f1c79a5a6c112019d6fcce69d

μ•ŒνŒŒκ°€μžˆλŠ” 16 μ§„μˆ˜ 색상이 문제λ₯Ό μΌμœΌν‚€λŠ” 것 κ°™μŠ΅λ‹ˆλ‹€. 이제 μžμ‚° νŒŒμ΄ν”„ 라인에 더 λ§Žμ€ 쒅속성이 μžˆμœΌλ―€λ‘œ 훨씬 더 고톡 슀러울 것 κ°™μŠ΅λ‹ˆλ‹€.

μ •μ λ³„λ‘œ 뢈투λͺ…도λ₯Ό 지정할 수 μžˆλ‹€λŠ” 것은 νŒŒν‹°ν΄ μ‹œμŠ€ν…œμ„ μˆ˜ν–‰ν•˜λŠ” 데 맀우 μœ μš©ν•©λ‹ˆλ‹€.

ν–₯ν›„ λ¦΄λ¦¬μŠ€μ—μ„œμ΄λ₯Ό 지원할 κ³„νšμ΄ μžˆμŠ΅λ‹ˆκΉŒ?

기술적 인 어렀움이 무엇인지 잘 λͺ¨λ₯΄κ² μŠ΅λ‹ˆλ‹€. μ§κ΄€μ μœΌλ‘œ geometry.opacityValues 와 같은 것을 κ°–λŠ” 것은이λ₯Ό μ§€μ›ν•˜λŠ” 이전 버전과 ν˜Έν™˜λ˜κ³  λ°©ν•΄κ°€λ˜μ§€ μ•ŠλŠ” λ°©μ‹μœΌλ‘œ λ³΄μž…λ‹ˆλ‹€. λ˜ν•œ 정점 μƒ‰μƒμ˜ 경우처럼 ν•„μš”ν•˜μ§€ μ•Šκ±°λ‚˜ 문제λ₯Ό μΌμœΌν‚€λŠ” 경우이 지원을 λΉ„ν™œμ„±ν™”ν•˜λŠ” μ „μ—­ pointsMaterial.vertexOpacityValues ν”Œλž˜κ·Έκ°€μžˆμ„ 수 μžˆμŠ΅λ‹ˆλ‹€.

@quyin μ‚¬μš©μž μ •μ˜ ShaderMaterial μ›ν•˜λŠ” 것을 ν•  수 μžˆμŠ΅λ‹ˆλ‹€. 도움이 ν•„μš”ν•˜λ©΄ stackoverflowλ₯Ό μ°Έμ‘°ν•˜μ‹­μ‹œμ˜€.

@WestLangley μ•Œκ² μŠ΅λ‹ˆλ‹€ . 정보에 λŒ€ν•΄μ„œ κ°μ‚¬λ“œλ¦½λ‹ˆλ‹€!

λ°˜λ©΄μ— JS둜 ν•  수 μžˆλ‹€λ©΄ 쒋을 κ²ƒμž…λ‹ˆλ‹€. 특히 μ €λ₯Ό ν¬ν•¨ν•˜μ—¬ 셰이더 언어에 μ΅μˆ™ν•˜μ§€ μ•Šμ€ μ‚¬λžŒλ“€μ—κ²ŒλŠ” λ”μš± κ·Έλ ‡μŠ΅λ‹ˆλ‹€. κ·Έλž˜λ„ λͺ¨λ‘ κ°μ‚¬ν•©λ‹ˆλ‹€!

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰