mikepan.github.io/bikes.html at master · mikepan/mikepan.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>Mike Pan: Portfolio</title>
		<meta name="description" content="Portfolio for Mike Pan, contains CG artwork, photos and codes.">
		<meta name="viewport" content="width=device-width, initial-scale=.7, user-scalable=no">
		<link rel="stylesheet" href="css/normalize.min.css">
		<link rel="stylesheet" href="css/main.css">
		<!--[if lt IE 9]><script src="js/html5shiv.js"></script><![endif]-->
		<!-- TODO: Use webfonts -->
	</head>
	<body>
		<div class='splash' id='splashBikes'></div>

		<div id='centre'>

			<header>
				<a href="/">
				<span id='headerPan'>Mike Pan</span>
				<span id='headerSub'>• Portfolio</span>
				</a>
				<hr class='faintHR'/>
			</header>

			<article>
				<h3>Peloton Aerodynamic Study</h3>
				<p>Totalsim, in collaboration with Awesim, created a highly detailed aerodynamics study of bikes traveling in a tight formation, or peloton. For this project I was only provided the bike models and had to create and deliver a photorealistic environment to go with aerodynamics simulation that was created.</p>

				<iframe src="https://player.vimeo.com/video/145306550?title=0&byline=0&portrait=0" width="960" height="540" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

				<p>I started with a dark 'studio' environment but the client decided on a more realistic environment. So I got to work recreating a french countryside backdrop.</p>

				<img src='content/bikes/3.jpg'>

				<p>A lot of the time was spent on creating all vegetations that scatter the landscape, including:
				<ul>
				<li>3 Grass layers</li>
				<li>4 Weed layers</li>
				<li>2 Flower layers</li>
				</ul>

				The challenge is to create enough variety in the distribution of the vegations so that the landscape doesn't look artificial. Creating material for all the vegatation was also tricky as they need to look good in all lighting conditions, especially with the sun at a low angle.
				</p>

				<img src='content/bikes/1.jpg'>

				<p>This scene pushed the limit of GPU rendering on my 2GB GTX770. It had trouble fitting all the grass and cyclists(instanced) into graphic memory for fast rendering. In the end, particle numbers were reduced for preview rendering, with final rendering done on the CPU.</p>

				<p>
				The focus of the project is delivering a photo-realistic rendering of the scene in the most flattering lighting possible. Using Blender and Cycles Renderer allowed me to rapidly setup complex nodal materials as well as experiment with lighting setups.</p>

				<img src='content/bikes/2.jpg'>


			<div id='flourish'>※</div>
			</article>


			<section id='aboot'>

				<div id='right'>
				<ul>
				<li><a href="/">Home</a></li>
				<li><a href="http://github.com/mikepan">GitHub</a></li>
				<li><a href="http://twitter.com/themikepan">Twitter</a></li>
				<li><a href="http://vimeo.com/mikepan">Vimeo</a></li>
				</ul>
				</div>

				<div id='cen'>
					<p>Mike dabbles in 3D art, programming, game-making, book-writing and photography.</p>
					<p>With 12 years of Blender experience and a keen interest in scientific visualization, he has worked for the University of British Columbia in Canada, Institute of Clinical Physiology in Italy, and Harvard Medical School.</p>
					<p>You can contact him for quotes and projects at mike.c.pan@gmail.com</p>
				</div>

				<div style='clear:both'></div>

			</section>

			<footer>
				<hr class='faintHR'/>
				Mike Pan | Vancouver, Canada | 2015
				<hr class='faintHR'/>
			</footer>

		</div> <!-- end center -->


		<script>
			(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
			(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
			m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
			})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
			ga('create', 'UA-50473962-1', 'mikepan.com');
			ga('send', 'pageview');
		</script>


	</body>
</html>