Page of 4 To view this demonstration, you will need a WebGL compatible browser. If you have a recent version of Chrome, Firefox, Safari or Internet Ex

Size: px

Start display at page:

Download "Page of 4 To view this demonstration, you will need a WebGL compatible browser. If you have a recent version of Chrome, Firefox, Safari or Internet Ex"

Gervase Harmon
6 years ago
Views:

Page of 4 Story Talents Microsoft Java / Open Source Project Delivery Mobile Team Culture Careers Blog Home > Blog > Technology > WebGL and Three.js: Texture Mapping sdg BLOG WebGL and Three.

Three.js can be downloaded from github or the three.js website, where you will also find links to documentation and examples. In my previous tutorial, I showed you how to setup a basic Three.

1 Page of 4 Story Talents Microsoft Java / Open Source Project Delivery Mobile Team Culture Careers Blog Home > Blog > Technology > WebGL and Three.js: Texture Mapping sdg BLOG WebGL and Three.js: Texture Mapping By: Greg Stier Three.js Three.js is a lightweight 3D library that hides a lot of the WebGL complexities and makes it very simple to get started with 3D programming on the web. Three.js can be downloaded from github or the three.js website, where you will also find links to documentation and examples. In my previous tutorial, I showed you how to setup a basic Three.js application. In that tutorial I talked about setting the stage and building a scene for our 3D application. My scene was very simple, a blue spinning cube. In this tutorial, I m going to explain texture mapping and show you how to texture objects using Three.js.

2 Page of 4 To view this demonstration, you will need a WebGL compatible browser. If you have a recent version of Chrome, Firefox, Safari or Internet Explorer, you should be good to go. If you are running an older version of Internet Explorer, you may be out of luck. You can view the result of this tutorial here, and the source code can be found here. What is Texture Mapping? Texture mapping is a method for adding detail to a 3D object by applying an image to one or more of the faces of that object. This allows us to add fine detail without the need to model those details into our 3D object, thus keeping the polygon count down. This can be a huge performance booster when rendering our models. Getting Started In this tutorial I m going to begin with the same simple HTML file that I used in my previous tutorial: <!DOCTYPE html> <html> <head> <title>webgl/three.js Step Tutorial</title> <style> body { margin: 0px; background color: #fff; overflow: hidden; } </style> </head> <body> <script src="js/three.min.js"></script> <script src="js/three texture tut.js"></script> </body> </html> The HTML assumes that you have downloaded the minified three.js library and saved it in a folder named js. I ve also created my application, three-texture-tut.js, and saved it in the same location. Again, I m going to start with similar javascript from my previous tutorial: var camera; var scene; var renderer; var mesh; init(); animate(); function init() { scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera( 70, window.innerwidth / var light = new THREE.DirectionalLight( 0xffffff ); light.position.set( 0,, ).normalize();

Page 3 of 4 6 7 8 9 0 3 4 5 6 7 8 9 30 3 3 33 34 35 36 37 38 39 40 4 4 43 44 45 46 47 48 49 50 5 } scene.add(light); var geometry = new THREE.CubeGeometry( 0, 0, 0); var material = new THREE.

innerwidth, window.innerheight ); document.body.appendchild( renderer.domelement ); window.addeventlistener( 'resize', onwindowresize, false ); render(); function animate() { mesh.rotation.x +=.

3 Page 3 of } scene.add(light); var geometry = new THREE.CubeGeometry( 0, 0, 0); var material = new THREE.MeshPhongMaterial( { ambient: 0x05050 mesh = new THREE.Mesh(geometry, material ); mesh.position.z = 50; scene.add( mesh ); renderer = new THREE.WebGLRenderer(); renderer.setsize( window.innerwidth, window.innerheight ); document.body.appendchild( renderer.domelement ); window.addeventlistener( 'resize', onwindowresize, false ); render(); function animate() { mesh.rotation.x +=.04; mesh.rotation.y +=.0; } render(); requestanimationframe( animate ); function render() { renderer.render( scene, camera ); } function onwindowresize() { camera.aspect = window.innerwidth / window.innerheight; camera.updateprojectionmatrix(); renderer.setsize( window.innerwidth, window.innerheight ); render(); } If you run your application now, you should see a spinning blue cube like the one pictured below. What we are going to do is make our boring blue cube look like a cool, game ready, low poly crate similar to the one pictured below.

Page 4 of 4 In order to do that we need to do a couple of things. First we need to create a new folder called images. This folder should be at the same level as your js folder.

Once you have the image saved in the correct location, we need to change our application to load the image and use this image as the texture for our cube. Open the three-texture-tut.

4 Page 4 of 4 In order to do that we need to do a couple of things. First we need to create a new folder called images. This folder should be at the same level as your js folder. Next, click on the following image, save it to your new images folder and name it crate.jpg. Once you have the image saved in the correct location, we need to change our application to load the image and use this image as the texture for our cube. Open the three-texture-tut.js file and replace the following line: var material = new THREE.MeshPhongMaterial( { ambient: 0x050505, co with: var material = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils And that s it. Refresh your browser and you will see a spinning crate instead of a plain blue cube. So what happened here? You will notice that while constructing our material, we specified the map property and set its value to the crate image. Three.js then took that texture and applied it to each face of our cube for us. This is really cool, but what if we want a different texture for each face of the cube? Fortunately Three.js provides a couple of ways for us to do this. The first method to do this is to simply give Three.js a list of textures, one for each face. To do this we re going to create 6 new materials, each with a different texture. So, the first thing we need to do is have six different textures. Click on the following images and save them to your images folder with these names: bricks.jpg, clouds.jpg, stone-wall.jpg, water.jpg, and wood-floor.jpg.

5 Page 5 of 4

Page 6 of 4 After you have saved the images replace the following line: var material = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils with: 3 4 5 6 7 8 9 0 var material = new THREE.

6 Page 6 of 4 After you have saved the images replace the following line: var material = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils with: var material = new THREE.MeshPhongMaterial( { map: THREE.ImageUti var material = new THREE.MeshPhongMaterial( { map: THREE.Imag var material3 = new THREE.MeshPhongMaterial( { map: THREE.Imag var material4 = new THREE.MeshPhongMaterial( { map: THREE.Imag var material5 = new THREE.MeshPhongMaterial( { map: THREE.Imag var material6 = new THREE.MeshPhongMaterial( { map: THREE.Imag var materials = [material, material, material3, material4, m var meshfacematerial = new THREE.MeshFaceMaterial( materials ) What we just did with the lines above was to create an array of materials, each material having a different texture. We then use this array of materials to create a MeshFaceMaterial. Finally, we need to tell our geometry to use this array of materials. Change the following line: to: mesh = new THREE.Mesh(geometry, material ); mesh = new THREE.Mesh(geometry, meshfacematerial); Refresh your browser. As you watch the cube spin you will see a different texture for each face of the cube. Again, this is very cool, but creating and loading an image for every face of our model becomes very impractical as the face count increases in our 3D models. This leads to the final method used for texture mapping called UV mapping. UV Mapping UV mapping is the process of taking an image and assigning parts of that image to individual faces of our 3D object. To see UV mapping in action, save the following image to the images folder and name it texture-atlas.jpg.

Page 7 of 4 Once you have the image saved, we are going to change the following lines: 3 4 5 6 var material = new THREE.MeshPhongMaterial( { map: THREE.ImageUtil var material = new THREE.

7 Page 7 of 4 Once you have the image saved, we are going to change the following lines: var material = new THREE.MeshPhongMaterial( { map: THREE.ImageUtil var material = new THREE.MeshPhongMaterial( { map: THREE.ImageUtil var material3 = new THREE.MeshPhongMaterial( { map: THREE.ImageUtil var material4 = new THREE.MeshPhongMaterial( { map: THREE.ImageUtil var material5 = new THREE.MeshPhongMaterial( { map: THREE.ImageUtil var material6 = new THREE.MeshPhongMaterial( { map: THREE.ImageUtil to: var material = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils As you can see, we ve gone back to creating one material and loading one texture. Next we need to assign different parts of our image to individual faces of our cube. The first thing I m going to do is define the sub images in our texture. Right after creating the material we are going to add the following lines:

Page 8 of 4 3 4 5 6 var bricks = [new THREE.Vector(0,.666), new THREE.Vector(.5,.66 var clouds = [new THREE.Vector(.5,.666), new THREE.Vector(,.66 var crate = [new THREE.Vector(0,.333), new THREE.

Vector(, 0), new The code above creates six arrays, one for each sub image in the texture. Each array contains 4 points that define the bounds of the sub image.

8 Page 8 of var bricks = [new THREE.Vector(0,.666), new THREE.Vector(.5,.66 var clouds = [new THREE.Vector(.5,.666), new THREE.Vector(,.66 var crate = [new THREE.Vector(0,.333), new THREE.Vector(.5,.333 var stone = [new THREE.Vector(.5,.333), new THREE.Vector(,.333 var water = [new THREE.Vector(0, 0), new THREE.Vector(.5, 0), new var wood = [new THREE.Vector(.5, 0), new THREE.Vector(, 0), new The code above creates six arrays, one for each sub image in the texture. Each array contains 4 points that define the bounds of the sub image. The values of the coordinates range from 0- where 0,0 is the bottom left corner and, is the upper right corner. The coordinate system is in terms of percentage of the texture. Let s take a look at the array representing the bricks sub image in more detail to help clarify what is happening here var bricks = [ new THREE.Vector(0,.666), new THREE.Vector(.5,.666), new THREE.Vector(.5, ), new THREE.Vector(0, ) ]; The bricks sub image is in the upper left corner of our texture, so the coordinates for it are as follows in a counter clockwise direction starting with the lower left corner of the sub image. Lower left corner: 0 The left most edge.666 Two thirds of the way up from the bottom Lower right corner:.5 Half way across.666 Two thrids of the way up from the bottom Upper right corner:.5 Half way across The top of the texture Upper left corner 0 The left most edge The top of the texture

Page 9 of 4 Now that we ve defined the sub images in our texture we can begin applying them to the faces of our cube. The first thing we re going to do is add the following line: geometry.

facevertexuvs[0][0] = [ bricks[0], bricks[], bricks[3] ] geometry.facevertexuvs[0][] = [ bricks[], bricks[], bricks[3] ] geometry.facevertexuvs[0][] = [ clouds[0], clouds[], clouds[3] ] geometry.

9 Page 9 of 4 Now that we ve defined the sub images in our texture we can begin applying them to the faces of our cube. The first thing we re going to do is add the following line: geometry.facevertexuvs[0] = []; This clears out any UV mapping that may have already existed on the cube. Next we re going to add the following lines of code: geometry.facevertexuvs[0][0] = [ bricks[0], bricks[], bricks[3] ] geometry.facevertexuvs[0][] = [ bricks[], bricks[], bricks[3] ] geometry.facevertexuvs[0][] = [ clouds[0], clouds[], clouds[3] ] geometry.facevertexuvs[0][3] = [ clouds[], clouds[], clouds[3] ] geometry.facevertexuvs[0][4] = [ crate[0], crate[], crate[3] ]; geometry.facevertexuvs[0][5] = [ crate[], crate[], crate[3] ]; geometry.facevertexuvs[0][6] = [ stone[0], stone[], stone[3] ]; geometry.facevertexuvs[0][7] = [ stone[], stone[], stone[3] ]; geometry.facevertexuvs[0][8] = [ water[0], water[], water[3] ]; geometry.facevertexuvs[0][9] = [ water[], water[], water[3] ]; geometry.facevertexuvs[0][0] = [ wood[0], wood[], wood[3] ]; geometry.facevertexuvs[0][] = [ wood[], wood[], wood[3] ]; The facevertexuvs property of geometry is an array of arrays that contains the coordinate mapping for each face of the geometry. Since we are mapping to a cube you may be wondering why there are faces in the array. The reason is that each face of the cube is actually created from triangles. So we must map each triangle individually. In the scenario above where we simply handed Three.js a single material, it automatically broke our texture down into triangles and mapped it to each face for us. The order in which you specify the coordinates for each face matters, they must be defined in a counter clockwise direction. Our sub image arrays were created in a counter clockwise direction, so looking at the image below we can see that in order to map the bottom triangle we need to use the vertices at index 0,, and 3. And to map the top triangle we need to use the vertices at index,, and 3. Finally, we replace the following lines:

js gives us a nice range of possibilities for texturing our 3D models from simply handing it an image, or a series of images, and having it do the mapping for us, to the more advanced UV mapping

10 Page 0 of 4 var meshfacematerial = new THREE.MeshFaceMaterial( materials ); mesh = new THREE.Mesh(geometry, meshfacematerial); with: mesh = new THREE.Mesh(geometry, material); Now if you refresh your browser you should see that each face of the cube is mapped to a different part of our texture. As you can see, Three.js gives us a nice range of possibilities for texturing our 3D models from simply handing it an image, or a series of images, and having it do the mapping for us, to the more advanced UV mapping which allows us to target specific portions of our texture. Be sure to check out Part 3 here: WebGL and Three.js: Lighting. This entry was posted in Technology and tagged Texture Mapping, Three.js, UV Mapping, WebGL. Bookmark the permalink. 0 Responses to WebGL and Three.js: Texture Mapping. eda-qa mort-ora-y says: December 7, 03 at :45 pm I think it should be noted that the coordinates used for your UV are tightly coupled to the vertex arrangement created by the CubeGeometry. This may be a problem since the Cube could in theory change it s vertex structure and break your UVs. I also tried the code with a PlaneGeometry and sure enough it has a different face arrangement, yielding an upside-down texture. I could have figured out that exact arrangement, but to be safe I created a new geometry instead with my explicit ordering of the vertices/faces. eda-qa mort-ora-y says: December 7, 03 at :46 pm Oops, forgot to say thank you. Despite the hiccup, your article was the key to me figuring out the UVs in three.js.. kbkbkb says: April, 04 at 0:54 am

Greg Stier says: April 3, 04 at 0:00 am I am planning to write a tutorial on interacting with 3D scenes. 3. yasir says: April 3, 04 at 3:30 am really nice and good tutorial thanks for this initial 4.

11 Page of 4 This was a really helpful tutorial. Thank you. I m wondering if you could give some instruction on how to add the ability for a mouse and/or touch to start and stop the spinning cube and manually spin the cube too? Greg Stier says: April 3, 04 at 0:00 am I am planning to write a tutorial on interacting with 3D scenes. 3. yasir says: April 3, 04 at 3:30 am really nice and good tutorial thanks for this initial 4. Jorge says: June 6, 04 at 5:0 am Hello, anyone knows how to load a.wrl object with texture? It s similar than the thing explained in this post but not creating a cube but loading a file. thanks! 5. Blend4Web says: July 8, 04 at 6:3 am Tutorials for open source Blender-WebGL game It even works in Android and ios browsers. 6. Keenan says: November 3, 04 at 3:55 pm Ok, so for the life of me I cannot load a simple texture! I keep getting the error: Uncaught SecurityError: Failed to execute teximaged on WebGLRenderingContext : The cross-origin image at file:///e:/html/expo%0sites/good%0site/images/minecraft% 0-%0Dirt.png may not be loaded. VM78 three.min.js:56 I have the texture in a folder called images. The images folder is in the same hierarchical depth as my index.html file. I have no idea why this isn t working. If I change the file name

!! Greg says: December 3, 04 at :0 pm Yes, this is a common problem.

12 Page of 4 I get a different error. The console tells me that it couldn t find the image. That means that (when I change the file name back to its original name) the script is able to find the image, but isn t wanting to use it. Why!!! Greg says: December 3, 04 at :0 pm Yes, this is a common problem. I m not sure what browser you are using, but most of them have really strict rules on cross site domain issues when it comes to WebGL. This means the browser will not let you load it locally, i.e., using the file protocol, you have to run it from a local web server. One of the simplest web servers to run locally is call Mongoose. It s just an exe that you can run. Once it s running you can specify the folder you want to designate as your root folder. 7. Kerry says: December, 04 at :48 pm very helpful, thanks a bunch. as a newb to 3D modeling, I had to look up UV mapping ( to see why it was better, when in this case it more than doubled the amount of code required. Is it something that is done by hand often, or usually handled by 3D programs? Leave a Your address will not be published. Required fields are marked * Name * * Website Comment Post Comment

13 Page 3 of 4 View By Category Community (7) Culture (40) Customer Service () Project Delivery (38) sdg News (3) Technology (57) Tag Cloud 3D Graphics 3D programming agile Best Places to Work Big Data Business Analysis Business Intelligence Cloud Communication community service Companies to Classrooms Data Analysis Data Integration Data Mining DataTables Data Warehousing Effective Meetings EFN emergency foodshelf network java jquery Liferay Liferay Symposium Liferay Symposium 04 Liferay Symposium Platinum Sponsor Liferay Twin Cities Location Services Microsoft Azure Minneapolis/St. Paul Business Journal Motivation MVC productivity Project Management REST Salvation Army SCRUM Spring Data Team Building The Happiness Advantage Three.js Toys for Tots Twin Cities Liferay Partner volunteer volunteers WebGL Archive February 05 () January 05 (3) December 04 (3) November 04 (3) October 04 (7) September 04 (3) August 04 (5) July 04 (3) June 04 (4) May 04 (4) April 04 (3) March 04 (3) February 04 (4) January 04 (5) December 03 (4) November 03 (4) October 03 (7) September 03 (4) August 03 (5) July 03 (5) June 03 (5) May 03 (4) April 03 (3) March 03 (5) February 03 (4)

14 Page 4 of 4 January 03 (4) December 0 (5) November 0 (5) October 0 (5) September 0 (5) August 0 (5) July 0 (3) Contact sdg Solution Design Group, Inc Olson Memorial Highway - Suite 50 Golden Valley, MN 5547 Phone: (95) Fax: (95) Contact the sdg Team Map to sdg I posted 3 photos on Facebook in the album "Eat, Drink & Be Merry sdg Holiday Party" fb.me/3anijsqi3 About weeks ago from SolutionDesignGroup's Twitter via Facebook

Game Graphics & Real-time Rendering

Game Graphics & Real-time Rendering CMPM 163, W2018 Prof. Angus Forbes (instructor) angus@ucsc.edu Lucas Ferreira (TA) lferreira@ucsc.edu creativecoding.soe.ucsc.edu/courses/cmpm163 github.com/creativecodinglab