forked from gpjt/webgl-lessons
-
Notifications
You must be signed in to change notification settings - Fork 29
/
Copy path16-rendertotexture.html
135 lines (114 loc) · 5.25 KB
/
16-rendertotexture.html
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<html>
<head>
<title>WebGL - 16 Render to texture</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="./style/webgl.css" type="text/css">
<script type="text/javascript" src="./scripts/glMatrix-0.9.5.min.js"></script>
<script src="./scripts/16-rendertotexture.js" type="text/javascript"></script>
<!-- Fragment shader program -->
<script id="per-fragment-lighting-fs" type="x-shader/x-fragment">
precision mediump float;
// uniform attribute for setting texture coordinates
varying vec2 vTextureCoord;
// uniform attribute for setting normals
varying vec3 vTransformedNormal;
// uniform attribute for setting positions
varying vec4 vPosition;
uniform vec3 uMaterialAmbientColor; // ambient material color uniform
uniform vec3 uMaterialDiffuseColor; // diffuse material color uniform
uniform vec3 uMaterialSpecularColor; // specular material color uniform
uniform float uMaterialShininess; // shininess material uniform
uniform vec3 uMaterialEmissiveColor; // emissive material color uniform
// uniform attribute for enabling specular
uniform bool uShowSpecularHighlights;
// uniform attribute for enabling textures
uniform bool uUseTextures;
uniform vec3 uAmbientLightingColor; // ambient light color uniform
uniform vec3 uPointLightingLocation; // light direction uniform
uniform vec3 uPointLightingDiffuseColor; // specular light color
uniform vec3 uPointLightingSpecularColor; // difuse light color
// uniform attribute for setting 2D sampler
uniform sampler2D uSampler;
void main(void) {
// Ambient component
vec3 ambientLightWeighting = uAmbientLightingColor;
vec3 lightDirection = normalize(uPointLightingLocation - vPosition.xyz);
vec3 normal = normalize(vTransformedNormal);
// Specular component
vec3 specularLightWeighting = vec3(0.0, 0.0, 0.0);
if (uShowSpecularHighlights) {
vec3 eyeDirection = normalize(-vPosition.xyz);
vec3 reflectionDirection = reflect(-lightDirection, normal);
float specularLightBrightness = pow(max(dot(reflectionDirection, eyeDirection), 0.0), uMaterialShininess);
specularLightWeighting = uPointLightingSpecularColor * specularLightBrightness;
}
// diffuese component
float diffuseLightBrightness = max(dot(normal, lightDirection), 0.0);
vec3 diffuseLightWeighting = uPointLightingDiffuseColor * diffuseLightBrightness;
// material color
vec3 materialAmbientColor = uMaterialAmbientColor;
vec3 materialDiffuseColor = uMaterialDiffuseColor;
vec3 materialSpecularColor = uMaterialSpecularColor;
vec3 materialEmissiveColor = uMaterialEmissiveColor;
float alpha = 1.0;
// textures
if (uUseTextures) {
vec4 textureColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
materialAmbientColor = materialAmbientColor * textureColor.rgb;
materialDiffuseColor = materialDiffuseColor * textureColor.rgb;
materialEmissiveColor = materialEmissiveColor * textureColor.rgb;
alpha = textureColor.a;
}
gl_FragColor = vec4(
materialAmbientColor * ambientLightWeighting
+ materialDiffuseColor * diffuseLightWeighting
+ materialSpecularColor * specularLightWeighting
+ materialEmissiveColor,
alpha
);
}
</script>
<!-- Vertex shader program -->
<script id="per-fragment-lighting-vs" type="x-shader/x-vertex">
// atributes for setting vertex position, normals and texture coordinates
attribute vec3 aVertexPosition;
attribute vec3 aVertexNormal;
attribute vec2 aTextureCoord;
uniform mat4 uMVMatrix; // model-view matrix
uniform mat4 uPMatrix; // projection matrix
uniform mat3 uNMatrix; // normal matrix
// variable for passing texture coordinates and lighting weights
// from vertex shader to fragment shader
varying vec2 vTextureCoord;
varying vec3 vTransformedNormal;
varying vec4 vPosition;
void main(void) {
// calculate the vertex position
vPosition = uMVMatrix * vec4(aVertexPosition, 1.0);
gl_Position = uPMatrix * vPosition;
vTextureCoord = aTextureCoord;
vTransformedNormal = uNMatrix * aVertexNormal;
}
</script>
<script type="text/javascript">
function showValue(id, newValue)
{
document.getElementById(id+"span").innerHTML = " " + newValue;
}
</script>
</head>
<body onload="start()">
<h1>WebGL - 16 Render to texture</h1>
<div id="content">
<canvas id="glcanvas" width="1280px" height="720px">
No <code><canvas></code> suppport in your browser.
</canvas>
<br />
<br />Laptop model adapted from <a href="http://www.turbosquid.com/3d-models/apple-macbook-max-free/391534">this 3DS Max model by Xedium</a><br/>
Moon texture courtesy of <a href="http://maps.jpl.nasa.gov/">the Jet Propulsion Laboratory</a>.
<br />
<br />
<a href="./"><- Back</a>
</div>
</body>
</html>