forked from arodic/renderman
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathfire.html
More file actions
87 lines (87 loc) · 6.19 KB
/
fire.html
File metadata and controls
87 lines (87 loc) · 6.19 KB
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript">
function closeWindow() {
window.open('','_parent','');
window.close();
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Aleksandar Rodić - Renderman Portfolio - ST Coloration - Winter Quarter @ SCAD 2009 - Prof. Malcolm Kesson</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<meta content="Aleksandar, Rodic, renderman, portfolio, 3d, design, modeling, programing, Savannah, collage, art, malcolm, kesson, rendering, render, model, texture, procedure, script, maya, image," name="keywords" />
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-258449-38");
pageTracker._trackPageview();
} catch(err) {}</script>
</head>
<body>
<div id="header">
<a href="index.html" target="_self">WorldBegin</a>
<a href="matrix.html" target="_self">MatrixComp</a>
<a href="lod.html" target="_self">LevelOfDetail</a>
<a href="st.html" target="_self">StColoration</a>
<a href="pattern.html" target="_self">PatternAnim</a>
<a href="fire.html" target="_self">Fire</a>
</div>
<div id="wrapper">
<div id="scroll">
<a href="matrix.html" target="_self">
<h1>Fire</h1>
</a>
<div class="container">
<p>The purpose of this project was to write a surface shader that when used in conjunction with the previously written (water) displacement shader would give a simple object the appearance of being an animated flame. As with the previous assignments, the emphasise was on the vital need to carefully observe and document a natural phenomena before creating a digital version of it. </p>
<p><a href="matrix.html" target="_self"><img src="images/fire_reference.jpg" alt="Fire reference image, flame, black background,animation" width="750" height="245" /></a></p>
<p>This reference photographs are taken with high shutter speeds to capture the form of the flame as accurate as possible. Also, I had to manually increase the F value to the highest value in order to get the right values and colors of the flame.</p>
</div>
<div class="container">
<img src="images/noise_process.jpg" alt="Noise Process" width="750" height="108" />
<p>The image sequence above shows how I created the basic flame shape and pattern.</p>
<p>1. noise is remapped using smoothstep function and t value.</p>
<div class="code">(1 - smoothstep(t - blur, t + blur, val));</div>
<p> </p>
<p> </p>
<p>blur variable is used to control sharpness of the edge while incandescence controls brightness.</p>
<p>2. Blur is increased</p>
<p>3. The image is inverted</p>
<p>4. Inverted image is multiplied with the first image.</p>
<p>5. The color gradient is applied.</p>
<p>6. Another noise is introduced to the noise function.</p>
<p>7. Gradient ramp is added to the result.</p>
<div class="code">-abs(0.5-s)*1.6</div>
<p> </p>
<p> </p>
<p><img src="images/turbulence_reference.jpg" alt="Turbulence reference" width="750" height="160" /> </p>
<p> </p>
<p>
<embed src="videos/deformation.mov" autoplay="true" loop="true" width="250" height="265" class="left" style="margin-right:8px;"> </embed>
In the next step, my goal was to create a turbulent distortion of the st space. I tried to achieve that effect with spiral swirls deformations. For that purpose, I created a secondary st space which is deformed with built-in rotate function in Renderman. Example on the left shows how rotation work
from a single point on a grid. After I got the desired rotation and falloff, I created a loop that generates multiple swirls centers and moves them up. Also the rotation is multiplied with t value so that rotation angle increases while the center moves up.</p>
<p> </p>
</div>
<div class="container">
<embed src="videos/flame_test_juxtaposition.mov" autoplay="false" loop="true" width="400" height="265" class="left" style="margin-right:8px;"> </embed>
This is a test with an actual fire shader juxtaposed with the reference video. Although the result did not match the reference, I decided to keep experimenting with this approach other possible results.</div>
<div class="container">
<p>
<embed src="videos/shape_fire.mov" width="250" height="265" autoplay="false" loop="true" class="left" style="margin-right:8px;"> </embed>
This is one of the resoults that I found very interesting because it resembles 2D fluid effects from maya and it renders in just few seconds. If I find time, I hope to keep experimenting with this shader. Also, you are free to take the shader and play with it. If you get any interesting resoults, please share it with me.</p>
<p> </p>
<p>Here is the shader:</p>
<p><a href="code/turb_fire.sl" target="_blank"><u>Turbulent fire renderman shader</u></a></p>
</div>
</div>
</div>
<div id="footer">
<p class="left"><a href="javascript: alert('Division by zero!')" target="_self">WorldEnd</a></p>
<p class="right">Copyright © 2009 <a href="http://aleksandarrodic.com/">Aleksandar Rodić</a></p>
</div>
<img src="http://aleksandarrodic.com:8440/tracking.gif"/>
</body>
</html>