Specular Map Là Gì

Giới thiệu

Texture mapping là phương pháp để biểu lộ thông tin chi tiết của một bề mặt như màu sắc, sự gồ ghề, sự vào suốt, sự sáng bóng, sự bội phản chiếu,... Texture mapping thực hiện một ảnh để lưu giữ trữ những thông tin ở dạng một mảng hai chiều, kế tiếp ánh xạ lên mặt phẳng của đối tượng, thông qua tiến trình điện thoại tư vấn là UV mapping.

Bạn đang xem: Specular map là gì

UV mapping mà tiến trình chiếu một ảnh 2D lên mặt phẳng 3D. UV chưa hẳn là từ viết tắt. Hai vần âm U và V biểu lộ hai trục của ảnh 2D. Các chữ dòng X, Y, Z đã được sử dụng để thể hiện các trục của bề mặt 3D. UV mapping sẽ hướng dẫn và chỉ định từng điểm trên hình ảnh 2D ứng cùng với điểm tương xứng trên bề mặt 3D, (u, v) ⟶ (x, y, z).

Trong bài này, chúng ta sẽ tìm hiểu các chủ thể sau:

Tải một Texture và áp dụng màu sắc của nó với 1 Material (color map)Sử dụng bump map, normal map, displacement bản đồ để mô rộp sự mấp mô của bề mặtSử dụng alpha map để sản xuất sự vào suốt 1 phần (không buộc phải toàn bộ) của đối tượngSử dụng emissive maps để mô phỏng hiệu ứng phát sángThiết lập background mang đến cảnhSử dụng environment map để tạo thành sự phản bội chiếu bao quanh trên bề mặt đối tượngSử dụng roughness map, metalness map, specular map để thiết lập các phần sáng bóngSử dụng ambient occlusion map, light maps để sinh sản bóngTìm phát âm gradient maps của MeshToonMaterialTìm phát âm Matcap của MeshMatcapMaterial

Color map

Chúng ta hãy bước đầu với ví dụ cơ bản nhất chính là định nghĩa màu sắc của đối tượng người tiêu dùng từ Texture thông qua màu sắc map. Color map có cách gọi khác là albedo map hoặc diffuse map.

Các đối tượng người sử dụng của bọn họ từ trước đến lúc này chỉ gồm một color sắc. Toàn bộ các điểm trên đối tượng đều phải có cùng màu đó. Mặc dù nhiên, trên thực tiễn các đối tượng người sử dụng thường có color khác nhau ở những vị trí không giống nhau, có những hoa văn phức tạp. Để có tác dụng được điều đó, bọn họ sẽ áp dụng một ảnh làm Texture, gán ở trong tính cho Material (vì Material đưa ra quyết định vật đang trông như thế nào).

Để mở đầu, họ sẽ thiết lập một cảnh đơn giản gồm 1 hình ước ở giữa. Chúng ta cũng cung ứng đó ánh sáng. Cảnh của họ trông như sau:

Chúng ta hãy so sánh cảnh trên với một hình cầu trong thế giới thực như một quả bóng, hoặc một viên bi, hoặc trái địa ước (từ ngẫu nhiên vật liệu gì quanh đó từ vật liệu nhựa và bề mặt phẳng), bọn họ sẽ thấy tức thì rằng hình mong của chúng ta không chân thực. Các đối tượng người dùng trong quả đât thật thường bị xước, bị vỡ, hoặc bị bẩn, và đổi khác từ đặc điểm đó đến điểm tiếp theo. Tuy nhiên, Material áp dụng cho hình cầu của bọn họ chỉ gồm một màu che phủ toàn cỗ bề mặt.

Các đối tượng Material có tương đối nhiều thuộc tính ngoại trừ thuộc tính color. Vào trường hợp đơn giản và dễ dàng nhất, chúng ta sẽ lấy một hình ảnh và kéo nó bao che bề mặt của một đối tượng người dùng 3D. Color của đối tượng người sử dụng sẽ tương đương màu của ảnh. Bọn họ gọi các ảnh được sử dụng theo phong cách này là các Texture. Chúng ta cũng có thể sử dụng Texture nhằm thể hiện những thuộc tính như màu sắc, sự gồ ghề, sự vào suốt,...

Về giải pháp lập trình trong Three.js, bọn họ sử dụng một ảnh, load nó bằng TextureLoader, kết quả trả về đang là một đối tượng người dùng Texture. Sau đó bọn họ gán đối tượng người dùng Texture này có tác dụng một nằm trong tính của Material. ở trong tính của Material nhằm định nghĩa màu sắc với Texture là maps (không bắt buộc colorMap, có lẽ rằng do đó là trường hợp hay được dùng nhất buộc phải để là maps cho ngắn gọn).

const textureLoader = new TextureLoader();const texture = textureLoader.load("đường dẫn ảnh");const material = new MeshStandardMaterial( map: texture);Ở đoạn code trên, bọn họ sử dụng luôn đối tượng Texture ngay sau thời điểm gọi cách thức load(). Tuy nhiên, ảnh có thể không được thiết lập về luôn mà có độ trễ, hoàn toàn có thể là vài ba trăm milli giây hoặc hơn thế nếu ảnh có dung lượng lớn. Chúng ta có thể nhìn thấy đối tượng người sử dụng mà không được vận dụng Texture vào một khoảng thời gian ngắn. Giả dụ muốn, bạn có thể chờ cho ảnh tải về xong bằng phương pháp gọi theo kiểu callback như sau:

const textureLoader = new TextureLoader();textureLoader.load( "đường dẫn ảnh", // onLoad callback texture => const material = new MeshStandardMaterial( map: texture ); );Luồng code của bọn họ với các loại maps khác như bump map, normal map, displacement map,... Cũng tương tự trên. Họ chỉ vậy tên của ở trong tính Material tương ứng, chũm vì maps sẽ là bumpMap, normalMap, displacementMap,...

Bạn rất có thể sử dụng những định dạng hình ảnh thông dụng như PNG, JPG, GIF, BMP. Để cho tác dụng tốt nhất, kích thước hình ảnh nên là số mũ của 2 (ví dụ 256x256, 512x512, 1024x1024). Nếu size của ảnh không phải số mũ của 2, Three.js sẽ scale ảnh về giá trị số nón của 2 ngay gần nhất.

Giả sử chúng ta sử dụng Texure sau:

Áp dụng mang đến ví dụ của chúng ta sẽ mang đến ra tác dụng như sau:

Ví dụ 07.01 - màu sắc map

Bump map

Bump maps được sử dụng để mô phỏng sự gồ ghề, khấp khểnh của một bề mặt. Bump maps sử dụng các độ cao không giống nhau. Bump map thường được lưu giữ ở một ảnh đen trắng, màu sắc đen là điểm có độ cao nhỏ nhất, màu trắng là điểm có độ to lớn nhất. Height map cũng được gọi là bump map, trừ lúc được nói rõ.

Ở hình trên, bọn họ có một hình ước ở mặt trái, một bump maps ở giữa, và công dụng khi áp dụng bump bản đồ ở bên phải. Bump map chuyển đổi cách mặt phẳng phản ứng lại tia nắng mà không biến hóa kích thước hay hình dáng của bề mặt.

Để chế tạo ra sự gồ ghề, ngoại trừ bump map, bạn cũng có thể dùng normal bản đồ hoặc displacement map. Tuy nhiên, bạn nên chỉ dùng một cái thôi.

Thuộc tính của Material nhằm gán Texture là bumpMap. Xung quanh ra, chúng ta cũng có thuộc tính bumpScale để chỉ định xác suất độ cao là béo hay nhỏ.

Chúng ta sẽ thực hiện Texure sau cùng với bump map:

Kết quả như sau:

Ví dụ 07.02 - Bump map

Normal map

Normal bản đồ là biến thể của bump map. Normal maps sử dụng vector pháp tuyến ở từng điểm, các thông số màu RGB tương ứng với những tọa độ XYZ. Bump maps chỉ sử dụng một thông số (chiều cao), còn normal maps sử dụng ba thông số nên sẽ chi tiết hơn.

Thuộc tính của Material nhằm gán Texture là normalMap. Không tính ra, họ cũng tất cả thuộc tính normalScale mà bạn có thể thiết lập tỷ lệ theo trục X và Y, ví dụ material.normalScale.set(1, 1). Giải pháp tiếp cận tốt nhất là nhằm hai phần trăm theo trục X cùng Y này bằng nhau.

Vấn đề với normal bản đồ là ảnh của nó rất khó để tạo. Các bạn cần những công cụ chuyên dụng như Blender hoặc Photoshop.

Với normal bản đồ hoặc bump map, họ không biến đổi hình dạng của đối tượng; toàn bộ các đỉnh vẫn nghỉ ngơi nguyên vị trí. Các maps này chỉ sử dụng tia nắng để sản xuất độ sâu cùng độ chi tiết giả.

Chúng ta sẽ áp dụng Texure sau với normal map:

Kết đúng thật sau:

Ví dụ 07.03 - Normal map

Displacement map

Dispacement bản đồ khác cùng với bump bản đồ (và normal map) tại phần với bump map, dạng hình (Geometry) của đối tượng không bị chỉnh sửa còn với displacement map, dạng hình bị sửa đổi như nó bị rứa thế. Cho nên displacement maps cũng tốn hiệu năng hơn.

Ở hình trên, hình cầu mặt trái áp dụng bump bản đồ còn hình cầu bên phải thực hiện displacement map. Chúng ta có thể nhìn vào đối tượng người tiêu dùng hoặc bóng của nó để thấy dạng hình của hình cầu phía bên trái không chuyển đổi còn mẫu thiết kế của hình ước bên đề xuất thực sự nạm đổi.

Thuộc tính của Material nhằm gán Texture là displacementMap. Xung quanh ra, bọn họ cũng gồm thuộc tính displacementScale là phần trăm thay thế. Chú ý, sử dụng displacement map chỉ có hiệu quả tốt khi đối tượng người dùng của họ chứa các đỉnh.

Chúng ta vẫn sử dụng những Texure sau với color map và displacement map:

Kết đúng như sau:

Ví dụ 07.04 - Displacement map

Alpha map

Alpha map là cách chúng ta điều chỉnh độ trong veo của bề mặt. Nếu quý giá của maps là màu đen, phần kia của đối tượng sẽ vào suốt hoàn toàn, với nếu cực hiếm là color trắng, phần đó sẽ đục hoàn toàn.

Thuộc tính của Material để gán Texture là alphaMap. Xung quanh ra, bọn họ phải thiết lập cấu hình thuộc tính transparent bởi true. Chúng ta cũng thiết lập cấu hình thuộc tính side là DoubleSide để có thể nhìn được phương diện trong của hình.

Chúng ta sẽ thực hiện Texure sau cùng với alpha map:

Để chỉnh lại kích cỡ của Texture nhỏ dại hơn khi bao che bề mặt, bạn cũng có thể làm như sau:

alphaTexture.wrapS = RepeatWrapping;alphaTexture.wrapT = RepeatWrapping;alphaTexture.repeat.set(8, 8);Kết quả như sau:

Ví dụ 07.05 - Alpha map

Emissive map

Emissive map hoàn toàn có thể được sử dụng để làm các phần nào kia của đối tượng phát sáng, giống như như giải pháp thuộc tính emissive có tác dụng với toàn bộ đối tượng.

Thuộc tính của Material để gán Texture là emissiveMap. Đồng thời, chúng ta cũng phải thiết lập thuộc tính emissive là màu gì đó khác màu đen để nó kết phù hợp với emissive map. Hai quý giá màu này sẽ được nhân cùng với nhau để ra công dụng hiển thị cuối cùng.

Chúng ta sẽ áp dụng Texure sau cùng với emissive map:

Kết đúng thật sau:

Ví dụ 07.06 - Emissive map

Thiết lập background

Trước khi tìm hiểu tiếp về những loại texture mapping, chúng ta hãy cùng tìm hiểu về cách tùy chỉnh thiết lập background trong Three.js. Chúng ta sẽ áp dụng background trong các ví dụ sau này.

Trong những ví dụ trước, họ thiết lập background của cảnh là 1 trong màu nào đấy bằng cách:

scene.background = new Color(0xFFFFFF);Hoặc:

renderer.setClearColor(new Color(0xFFFFFF));Thiết lập background bởi CSSChúng ta có thể thêm một background tĩnh đơn giản bằng CSS. Bọn họ cần tùy chỉnh thuộc tính background cho đối tượng canvas là một trong ảnh:

canvas background: url(../images/daikanyama.jpg) no-repeat center center; background-size: cover;Chúng ta ko được cấu hình thiết lập backgound mang lại Scene xuất xắc setClearColor() mang lại Renderer nữa. Chúng ta cũng cần thiết lập Renderer có áp dụng alpha để hầu như chỗ mà bọn họ không vẽ gì vào cảnh vẫn là vào suốt. Bọn họ cần tùy chỉnh cấu hình ở ngay khi khởi tạo, không sửa được sau này.

const renderer = new WebGLRenderer( canvas, alpha: true);Vậy là chúng ta đã tất cả một background bằng ảnh.

Ví dụ 07.07 - Background CSS

Thiết lập background của Scene

Nếu chúng ta muốn background cũng có thể bị tác động bởi những hiệu ứng post-processing, chúng ta cần vẽ background bởi Three.js. Để làm được điều này, bọn họ đơn giản chỉ việc tải một Texture cùng gán nó cho background của Scene.

Xem thêm: Omega Alpha Beta Là Gì ? Mọi Thứ Về Omegaverse Bạn Nhất Định Phải Biết!

const textureLoader = new TextureLoader();const backgroundTexture = textureLoader.load("../images/daikanyama.jpg");scene.background = backgroundTexture;Ví dụ 07.08 - Background Scene

Kết quả không không giống gì so với thiết lập cấu hình bằng CSS lắm. Tuy nhiên, nếu hiện thời chúng ta thực hiện một cảm giác post-processing nào đó thì background cũng bị ảnh hưởng luôn.

Skybox cùng với hình lập phương solo giản

Background tĩnh không hẳn cái mà chúng ta thường ao ước trong một cảnh 3D. Núm vào đó, chúng ta thường ý muốn cái gì đó kiểu như skybox, một khối vỏ hộp với khung trời được vẽ trong đó. Chúng ta để Camera làm việc trong khối hộp và trông như gồm một bầu trời ở backgound.

Cách thông dụng độc nhất để xúc tiến một skybox kia là tạo nên một hình lập phương, cấu hình thiết lập Texture mang lại nó, với vẽ nó từ bên trong. Ở từng cạnh của hình lập phương họ để một Texture. Đánh lốt thuộc tính side là BackSide để vẽ bên trong chứ không phải bên phía ngoài hình lập phương.

const textureLoader = new TextureLoader();const orders = < "pos-x", // right - phải "neg-x", // left - trái "pos-y", // vị trí cao nhất - trên "neg-y", // bottom - dưới "pos-z", // front - trước "neg-z" // back - sau>;const materials = orders.map(fileName => new MeshStandardMaterial( map: textureLoader.load("../textures/cube/computer_history_museum/" + fileName + ".jpg"), side: BackSide));const geometry = new BoxGeometry(5, 5, 5);const mesh = new Mesh(geometry, materials);scene.add(mesh);Chú ý chúng ta cần liệt kê đúng máy tự các ảnh:

phải - pos-xtrái - neg-xtrên - pos-ydưới - neg-ytrước - pos-zsau - neg-z

Chúng ta sẽ áp dụng 6 ảnh tương ứng cùng với 6 mặt:

Ví dụ 07.09 - Skybox simple cube

Với bí quyết này, chúng ta cũng có thể zoom ra bên ngoài hình lập phương. Quanh đó ra, chỗ tiếp nối giữa các cạnh của hình lập phương sẽ là 1 trong những đường trực tiếp mà bạn có thể phát hiện bằng mắt buộc phải không chân thực lắm.

Skybox với CubeTextureLoader

Giải pháp không giống để tạo skybox là áp dụng một CubeTexture. Một CubeTexture là một dạng Texture đặc biệt quan trọng mà gồm 6 mặt, tương ứng những mặt của hình lập phương. Bọn họ cũng sử dụng 6 ảnh ở ví dụ trước và cài chúng bằng CubeTextureLoader, kế tiếp gán cho background của Scene.

const orders = < "pos-x", // right - phải "neg-x", // left - trái "pos-y", // đứng top - bên trên "neg-y", // bottom - bên dưới "pos-z", // front - trước "neg-z" // back - sau>;const images = orders.map(fileName => return "../textures/cube/computer_history_museum/" + fileName + ".jpg";);const cubeTextureLoader = new CubeTextureLoader();const cubeMap = cubeTextureLoader.load(images);this.scene.background = cubeMap;Ví dụ 07.10 - Skybox CubeTexture

Khi họ zoom thì background giữ nguyên. Không tính ra, Three.js vẫn nối các hình ảnh với nhau một biện pháp liền mạch.

Skybox với hình ảnh panorama

Cách ở đầu cuối để chế tác skybox mà chúng ta sẽ mày mò là thực hiện một Equirectangular map. Đây chính là cách hệt như phép chiếu từ phiên bản đồ dạng phẳng lên trái địa cầu. Bọn họ sẽ sử dụng một hình ảnh panorama 360 độ, ví dụ hình ảnh sau:

Đầu tiên, bọn họ sẽ load ảnh như một Texture, sau đó, sinh sống hàm callback (chúng ta bắt buộc chờ ảnh load xong), chúng ta tạo một đối tượng người sử dụng WebGLCubeRenderTarget và gọi phương thức fromEquirectangularTexture() để có mặt một CubeTexture từ bỏ Texture đó. Họ truyền kích cỡ cubemap khi khởi tạo WebGLCubeRenderTarget, hoàn toàn có thể truyền quý giá bằng độ cao của ảnh.

const textureLoader = new TextureLoader();const url = "../images/tears_of_steel_bridge_2k.jpg";const onLoaded = texture => const rt = new WebGLCubeRenderTarget(texture.image.height); rt.fromEquirectangularTexture(this.renderer, texture); this.scene.background = rt.texture;;textureLoader.load(url, onLoaded);Ví dụ 07.11 - Skybox Panorama

Enviroment map

Static

Việc tính toán sự bội phản chiếu môi trường xung quanh xung quanh siêu tốn CPU, với thường yêu cầu giải pháp tiếp cận ray tracer. Nếu bọn họ muốn có phản chiếu môi trường thiên nhiên ở Three.js, chúng ta vẫn hoàn toàn có thể làm được, bằng phương pháp giả nó. Bọn họ sẽ tạo ra một Texture của môi trường.

Environment bản đồ là kỹ thuật tia nắng dựa vào ảnh hiệu quả nhằm mô phỏng sự làm phản chiếu bề mặt bằng các Texture đã giám sát và đo lường trước. Texture lưu ảnh của không khí xung quanh đối tượng. Enviroment bản đồ cũng nói một cách khác là reflection map.

Chúng ta thực hiện quá trình sau:

Chúng ta cũng khởi chế tạo một CubeTexture như khi sản xuất skyboxThiết lập skybox (môi trường xung quanh)Áp dụng cùng CubeTexture tê một đợt tiếp nhữa cho đối tượng người sử dụng của chúng ta (thuộc tính envMap của Material)

Bên cạnh sự phản nghịch chiếu (reflection), Three.js cũng có thể chấp nhận được sử dụng một CubeTexture cho việc khúc xạ (refraction). Sự bội nghịch chiếu như chúng ta nhìn vào gương, còn sự khúc xạ như họ nhìn vào kính (nhìn xuyên qua). Để có hiệu ứng này, chúng ta chỉ cần thiết lập cubeMap.mapping là CubeReflectionMapping (mặc định) hoặc CubeRefrationMapping.

Chú ý: Để tất cả hiệu ứng khúc xạ, họ phải thực hiện MeshPhongMaterial. MeshStandardMaterial không cung cấp khúc xạ.

Ví dụ 07.12 - Environment maps static

Dynamic

Ở lấy một ví dụ trên, bọn họ sử dụng một environment bản đồ tĩnh cho những đối tượng. Nói bí quyết khác, bọn họ chỉ rất có thể thấy bội phản chiếu của môi trường mà không thấy bội phản chiếu của các đối tượng người dùng khác. Để rất có thể nhìn được, chúng ta cần sử dụng thêm một Camera là CubeCamera.

const cubeRenderTarget = new WebGLCubeRenderTarget( 128, generateMipmaps: true, minFilter: LinearMipmapLinearFilter );const cubeCamera = new CubeCamera(0.1, 100, cubeRenderTarget);Chúng ta sẽ thực hiện CubeCamera này để có thể chụp lại cảnh với toàn bộ các đối tượng người dùng và áp dụng nó cho CubeTexture. Nhị tham số trước tiên là các khoảng cách near và far của Camera. Chúng ta cũng cần chắc chắn vị trí của CubeCamera này bằng vị trí của đối tượng.

cubeMesh.add(cubeCamera);cubeCamera.position.copy(cubeMesh.position);Để áp dụng các cái CubeCamera nhận thấy cho đối tượng, bọn họ làm như sau:

cubeMaterial.envMap = cubeCamera.texture;Trong vòng lặp animation, chúng ta xử lý như sau:

cubeMesh.visible = false;cubeCamera.updatep(renderer, scene);cubeMesh.visible = true;Đầu tiên, bọn họ ẩn đối tượng cubeMesh đi, vì bọn họ chỉ mong mỏi nhìn sự bội phản chiếu của đối tượng người dùng sphereMesh lên trên đối tượng người sử dụng cubeMesh. Tiếp theo, họ render cảnh với cubeCamera bởi phương thức update(). Sau đó, họ hiện lại đối tượng cubeMesh với render cảnh như bình thường.

Ví dụ 07.13 - Environment map dynamic

Roughness maps và metalness map

Bằng những thuộc tính roughness hoặc metalness của MeshStandardMaterial, bạn cũng có thể thiết lập độ giống như kim loại, tương tự như độ thô ráp, để gia công cho đối tượng trông giống bằng kim loại, gỗ, nhựa, có sáng loáng hay không. Ko kể hai trực thuộc tính trên, chúng ta cũng rất có thể sử dụng Texture. Trả sử bọn họ có một đối tượng người sử dụng thô ráp nhưng mà lại muốn 1 phần nào kia của đối tượng đó sáng bóng, hoặc phần nào đó trông xước hoặc thô ráp hơn, bạn cũng có thể thiết lập thuộc tính roughnessMap với metalnessMap. Khi chúng ta sử dụng các maps đó, giá trị của Texture ở vị trí chỉ định sẽ được nhân với giá trị của roughness hoặc metalness, quyết định px chỉ định được vẽ như thế nào.

Chúng ta cũng thực hiện environment maps để hiển thị phản nghịch chiếu của môi trường xung quanh xung quanh trên đối tượng, nhằm ví dụ được minh họa rõ nét hơn. Một đối tượng với metalness cao đang phản chiếu những hơn. Một đối tượng người tiêu dùng với roughness cao sẽ khuếch tán sự phản bội chiếu những hơn.

Chúng ta sẽ thực hiện Texture sau với tất cả roughness maps và metalness map:

Kết quả thật sau:

Ví dụ 07.14 - Roughness map

Ví dụ 07.15 - Metalness map

Specular map

Specular map có thể chấp nhận được mức độ phản nghịch chiếu (mức độ tạo specular highlight) khác nhau ở những vị trí bên trên bề mặt. Cùng với specular map, chúng ta có thể định nghĩa phần như thế nào của đối tượng người tiêu dùng sẽ sáng bóng, phần như thế nào của đối tượng người sử dụng sẽ thô ráp (tương từ bỏ như roughnessMap và metalnessMap mà họ vừa search hiểu). Nằm trong tính của Material để gán Texture là specularMap. Bọn họ phải áp dụng với MeshPhongMaterial, bởi vì MeshStandardMaterial không tồn tại thuộc tính này.

Chúng ta vẫn vẽ một quả địa cầu và thực hiện specular map để làm các phần là biển khơi sẽ sáng bóng loáng hơn các phần là khu đất liền. Họ sẽ áp dụng Texure sau với specular map:

Các vị trí màu black nghĩa là độ sáng loáng bằng 0, và white color nghĩa là độ sáng bóng 100%.

Kết quả thật sau:

Ví dụ 07.16 - Specular map

Ambient occlusion map

Việc chế tạo bóng bằng phương pháp mô rộp tia sáng sủa từ nguồn sáng đến đối tượng người dùng là một tiến trình thống kê giám sát tốn các hiệu năng mà cần lặp đi lặp lại trong tầm lặp render. Nếu nguồn sáng hoặc đối tượng người sử dụng của bọn họ di chuyển thì việc giám sát này là buộc phải thiết. Tuy nhiên, ví như nguồn sáng sủa và đối tượng là tĩnh, sẽ tốt hơn tương đối nhiều nếu bọn họ tính toán câu hỏi tạo trơn một lần cùng tái sử dụng nó. Để làm cho được điều này, Three.js cung ứng hai bản đồ khác nhau: ambient occlusion maps và light map.

Ambient occlusion là 1 trong kỹ thuật nhằm quyết định một trong những phần của đối tượng sẽ lộ ra dưới Ambient Light bao nhiêu. Trực thuộc tính của Material để gán Texture là aoMap. Kế bên ra, chúng ta cũng có thuộc tính aoMapIntensity để thiết lập cấu hình mức độ áp dụng ambient occlusion map.

Chú ý, để ambient occlusion (và light) maps hoạt động, họ phải chỉnh đối tượng người dùng Geometry như sau:

geometry.attributes.uv2 = geometry.attributes.uv;Chúng ta sẽ sử dụng Texure sau với ambient occlusion map:

Kết quả như sau:

Ví dụ 07.17 - Ambient occlusion map

Với ambient occlusion map, mặc dù chỉ thực hiện Ambient Light nhưng đối tượng người dùng của họ vẫn bao gồm bóng, tạo cảm xúc về độ sâu 3D.

Light map

Để sản xuất bóng giả, bọn họ cũng hoàn toàn có thể sử dụng light map. Light map còn gọi là shadow map. Thường thì ambient occlusion gán đến đối tượng, còn light map gán đến nền. ở trong tính của Material để gán Texture là lightMap.

Chúng ta sẽ sử dụng Texure sau với light map:

Kết quả thật sau:

Ví dụ 07.18 - Light map

Gradient map

Ở chương về Material vào Three.js, họ đã tò mò về MeshToonMaterial. MeshToonMaterial mang định áp dụng hai tông màu: một cho khoảng không gian tự 0% đến 70%, một mang lại từ 70% mang lại 100%. Để biến đổi các tông màu này, bạn có thể sử dụng gradient map. ở trong tính là gradientMap, và chỉ áp dụng với MeshToonMaterial.

Chúng ta rất có thể sử dụng những Texture có size 3x1 hoặc 5x1, mỗi px có một màu khác biệt sau cùng với gradient map để tạo bố hoặc năm tông màu khác nhau thay bởi vì chỉ hai.

Kết quả thật sau:

Ví dụ 07.19 - Gradient map

Matcap

MeshMatcapMaterial được định nghĩa bởi một Matcap (Material Capture, hoặc Lit Sphere) Texture, nghĩa là Texture nhưng đã encode sẵn màu sắc và shading. MeshMatcapMaterial ko phản ứng lại với ánh sáng do file hình ảnh Matcap đang encode sẵn tia nắng được đo lường và thống kê trước (baked lighting). Chúng ta không yêu cầu thêm những nguồn sáng vào cảnh khi thực hiện MeshMatcapMaterial, tuy nhiên đối tượng người sử dụng không bị trông solo sắc nhưng khá là chân thật, trông như các đối tượng làm từ làm từ chất liệu sứ.

Chúng ta chỉ việc load một Texture cùng gán mang lại thuộc tính là matcap của MeshMatcapMaterial.

Chúng ta hoàn toàn có thể lấy các Matcap Texture ở add sau:

https://github.com/nidorx/matcaps

Một Matcap Texture tất cả dạng hình trụ kiểu như sau:

Ví dụ 07.20 - Matcap

Kết luận

Các Texture thường được tạo ra từ những file ảnh. Tuy nhiên, bạn hãy đừng coi nó là những file ảnh để bọn họ nhìn bình thường, mà hãy coi nó là kết cấu dữ liệu để giao hàng mục đích như thế nào đó. Họ không dễ dàng và đơn giản là phủ hình ảnh đó lên bề mặt của đối tượng, mà dùng nó để tính toán màu sắc, độ cao, độ thô ráp,... Của từng điểm bên trên bề mặt. Từng điểm của hình ảnh sẽ quyết định giá trị của một điểm tương xứng trên đối tượng. Với bản đồ sẽ là color của điểm, cùng với bumpMap vẫn là độ dài của điểm, cùng với roughnessMap vẫn là độ thô ráp của điểm đó,... Những giá trị vẫn được vận dụng cho từng điểm, cầm cố cho toàn thể đối tượng.

Xem thêm: " Phích Cắm Tiếng Anh Là Gì, Từ Vựng Về Dụng Cụ Dùng Trong

Về code, giải pháp làm của các Texture mapping đông đảo giống nhau. Đó là tạo đối tượng người sử dụng TextureLoader, gọi cách làm load() để trả về đối tượng người tiêu dùng Texture, rồi gán cho 1 thuộc tính của Material. Quan lại trọng họ phải có những Texture đúng, đẹp.