{"id":257036,"date":"2017-08-04T06:40:42","date_gmt":"2017-08-04T13:40:42","guid":{"rendered":"http:\/\/css-tricks.com\/?p=257036"},"modified":"2017-08-04T13:13:44","modified_gmt":"2017-08-04T20:13:44","slug":"creating-photorealistic-3d-graphics-web","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/creating-photorealistic-3d-graphics-web\/","title":{"rendered":"Creating Photorealistic 3D Graphics on the Web"},"content":{"rendered":"

Before becoming a web developer, I worked in the visual effects industry, creating award-winning, high-end 3D effects for movies and TV Shows such as Tron, The Thing, Resident Evil, and Vikings<\/a>. To be able to create these effects, we would need to use highly sophisticated animation software such as Maya<\/a>, 3Ds Max<\/a> or Houdini<\/a> and do long hours of offline rendering on Render Farms<\/a> that consisted of hundreds of machines. It’s because I worked with these tools for so long that I am now amazed by the state of the current web technology. We can now create and display high-quality 3D content right inside the web browser, in real time, using WebGL and Three.js.<\/p>\n

<\/p>\n

Here is an example of a project<\/a> that is built using these technologies. You can find more projects that use three.js on their website<\/a>.<\/p>\n

\"\"
Some projects using three.js<\/figcaption><\/figure>\n

As the examples on the three.js website demonstrate, 3D visualizations have a vast potential in the domains of e-commerce, retail, entertainment, and advertisement. <\/p>\n

WebGL is a low-level JavaScript API that enables creation and display of 3D content inside the browser using the GPU. Unfortunately, since WebGL is a low-level API, it can be a bit hard and tedious to use. You need to write hundreds of lines of code to perform even the simplest tasks. Three.js, on the other hand, is an open source JavaScript library that abstracts away the complexity of WebGL and allows you to create real-time 3D content in a much easier manner.<\/p>\n

In this tutorial, I will be introducing the basics of the three.js library. It makes sense to start with a simple example to communicate the fundamentals better when introducing a new programming library but I would like to take this a step further. I will also aim to build a scene that is aesthetically pleasant and even photorealistic to a degree.<\/p>\n

We will just start out with a simple plane and sphere but in the end it will end up looking like this:<\/p>\n

See the Pen learning-threejs-final<\/a> by Engin Arslan (@enginarslan<\/a>) on CodePen<\/a>.<\/p>\n

Photorealism is the pinnacle of computer graphics but achieving is not necessarily a factor of the processing power at your disposal but a smart deployment of techniques from your toolbox. Here are a few techniques that you will be learning about in this tutorial that will help your scenes achieve photo-realism.<\/p>\n