Expand Branding
1
<!-- Cubic Rotor. License: GPL2 or Later. Author: Kenta Ishii, Tokyo. -->
2
<style scoped>
3
div#cubic-rotor {
4
display: block;
5
position: relative;
6
top: 0;
7
left: 0;
8
width: 100%;
9
height: 100%;
10
padding: 0;
11
margin: 0;
12
}
13
14
canvas#cubic-rotor-canvas {
15
display: block;
16
position: relative;
17
top: 0;
18
left: 0;
19
padding: 0;
20
margin: 0;
21
}
22
</style>
23
24
<div id="cubic-rotor">
25
<canvas id="cubic-rotor-canvas">
26
</canvas>
27
</div>
28
29
<!-- Vertex Shader -->
30
<script id="cubic-rotor-shader-vertex1" type="x-shader/x-vertex">
31
attribute vec3 aVertexPosition;
32
attribute vec3 aColor;
33
34
uniform mat4 uTMatrix;
35
uniform mat4 uSMatrix;
36
uniform float uRArray[4];
37
uniform mat4 uVMatrix;
38
uniform mat4 uPMatrix;
39
40
varying vec3 vColor;
41
42
// Function Declaration
43
vec4 makeversor( in float axyz[4] );
44
mat4 versortomatrix( in vec4 versor );
45
46
// Functio Definition
47
vec4 makeversor( in float axyz[4] ) {
48
float rad = radians( axyz[0] );
49
vec3 normalized = normalize( vec3( axyz[1], axyz[2], axyz[3] ) );
50
vec4 versor;
51
versor.w = cos( rad / 2.0 );
52
versor.x = sin( rad / 2.0 ) * normalized.x;
53
versor.y = sin( rad / 2.0 ) * normalized.y;
54
versor.z = sin( rad / 2.0 ) * normalized.z;
55
56
return versor;
57
}
58
59
mat4 versortomatrix( in vec4 versor ) {
60
mat4 matrix;
61
float w = versor.w;
62
float x = versor.x;
63
float y = versor.y;
64
float z = versor.z;
65
matrix[0][0] = 1.0 - 2.0 * y * y - 2.0 * z * z;
66
matrix[0][1] = 2.0 * x * y + 2.0 * w * z;
67
matrix[0][2] = 2.0 * x * z - 2.0 * w * y;
68
matrix[0][3] = 0.0;
69
matrix[1][0] = 2.0 * x * y - 2.0 * w * z;
70
matrix[1][1] = 1.0 - 2.0 * x * x - 2.0 * z * z;
71
matrix[1][2] = 2.0 * y * z + 2.0 * w * x;
72
matrix[1][3] = 0.0;
73
matrix[2][0] = 2.0 * x * z + 2.0 * w * y;
74
matrix[2][1] = 2.0 * y * z - 2.0 * w * x;
75
matrix[2][2] = 1.0 - 2.0 * x * x - 2.0 * y * y;
76
matrix[2][3] = 0.0;
77
matrix[3][0] = 0.0;
78
matrix[3][1] = 0.0;
79
matrix[3][2] = 0.0;
80
matrix[3][3] = 1.0;
81
82
return matrix;
83
}
84
85
void main( void ) {
86
mat4 RMatrix = versortomatrix( makeversor( uRArray ) );
87
vColor = aColor;
88
gl_Position = uPMatrix * uVMatrix * RMatrix * uSMatrix * uTMatrix * vec4( aVertexPosition, 1.0 );
89
}
90
</script>
91
92
<!-- Fragment Shader -->
93
<script id="cubic-rotor-shader-fragment1" type="x-shader/x-fragment">
94
precision mediump float;
95
precision mediump int;
96
97
varying vec3 vColor;
98
99
void main( void ) {
100
gl_FragColor = vec4( vColor.r, vColor.g, vColor.b, 1.0 );
101
}
102
</script>
103
104
<!-- Vertices -->
105
<script id="cubic-rotor-vertex-cube" type="application/json">
106
{
107
"geometry": {
108
"vertices": [
109
[ 1.0, -1.0, -1.0 ],
110
[ 1.0, -1.0, 1.0 ],
111
[ -1.0, -1.0, 1.0 ],
112
[ -1.0, -1.0, -1.0 ],
113
[ 1.0, 1.0, -1.0 ],
114
[ 1.0, 1.0, 1.0 ],
115
[ -1.0, 1.0, 1.0 ],
116
[ -1.0, 1.0, -1.0 ]
117
],
118
"index": [
119
6, 3, 2,
120
6, 7, 3,
121
1, 4, 8,
122
1, 8, 5,
123
8, 6, 5,
124
8, 7, 6,
125
2, 4, 1,
126
2, 3, 4,
127
5, 2, 1,
128
5, 6, 2,
129
3, 7, 8,
130
3, 8, 4
131
]
132
},
133
"texture": {
134
"vertices": [
135
[ 1.0, 0.0, 0.0 ],
136
[ 0.0, 1.0, 0.0 ],
137
[ 0.0, 0.0, 1.0 ],
138
[ 1.0, 1.0, 0.0 ],
139
[ 0.0, 1.0, 1.0 ],
140
[ 1.0, 0.0, 1.0 ]
141
],
142
"index": [
143
1, 1, 1,
144
1, 1, 1,
145
2, 2, 2,
146
2, 2, 2,
147
3, 3, 3,
148
3, 3, 3,
149
4, 4, 4,
150
4, 4, 4,
151
5, 5, 5,
152
5, 5, 5,
153
6, 6, 6,
154
6, 6, 6
155
]
156
}
157
}
158
</script>
159
160
<!-- Actual JavaScript Code to Run -->
161
<script type="text/javascript" defer>
162
(function() {
163
// Get Elements to Use
164
var wrap_canvas = document.getElementById('cubic-rotor');
165
var canvas = document.getElementById('cubic-rotor-canvas');
166
var display = wrap_canvas.parentNode;
167
if ( ! display.classList.contains('jimmy-branding-content') ) {
168
display = null;
169
}
170
171
if ( ! display ) {
172
// To Preview
173
canvas.width = '600';
174
canvas.style.width = '600px';
175
canvas.height = '600';
176
canvas.style.height = '600px';
177
}
178
179
// Activate SENOR and Display
180
var THE_SENOR = new SENORWEBGL1();
181
var ATTACHER = new SENORUTL.attachDisplayOfJimmyBranding({ canvas: canvas, display: display, context: THE_SENOR });
182
183
THE_SENOR.activate({
184
canvas: canvas,
185
color: [0.0, 0.0, 0.0, 0.0]
186
});
187
188
// Create Rendering Object
189
// For Rotation, Shrink Scale. Caution! it's REVERSAL as opposed to regular scaling!
190
// Because this script uses to expand texture pointing for scaling, not to expand vertices!
191
var theSampleCube = new THE_SENOR.Object({
192
sx: 0.6,
193
sy: 0.6,
194
sz: 0.6,
195
angle: 0.0,
196
rx: 1.0,
197
ry: 1.0,
198
rz: 1.0,
199
angle_speed: 0.01
200
});
201
202
// Get Vertices Object Above
203
var cube_object = SENORUTL.object3D( SENORUTL.attachJSONRaw('cubic-rotor-vertex-cube') );
204
205
// Register Vertices and Texture Objects to Rendering Object
206
theSampleCube.registerVao({
207
vertices:
208
[
209
cube_object.geometry,
210
cube_object.texture
211
]
212
});
213
214
// Register Shaders with Attributes
215
theSampleCube.registerShaders({
216
vertex_shader: "cubic-rotor-shader-vertex1",
217
fragment_shader: "cubic-rotor-shader-fragment1",
218
attributes:
219
[
220
"aVertexPosition",
221
"aColor"
222
],
223
// e.g. if the attribute is vec3 in the shader, unit_length is "3"
224
unit_length: [3, 3]
225
});
226
227
// Register Function by Aliasing
228
theSampleCube.registerUniforms( setUniforms );
229
230
var timeoutid_mainloop = null;
231
var previous_time = null;
232
var delta = 0;
233
234
// To Suppress Texture Error on Some Browsers, Add Onload
235
window.addEventListener( 'load', function() {
236
!function() {
237
238
var current_time = (new Date).getTime();
239
if ( previous_time ) {
240
delta = current_time - previous_time;
241
}
242
previous_time = current_time;
243
244
THE_SENOR.clear();
245
246
theSampleCube.pict({
247
attributes:
248
{
249
delta: delta
250
}
251
});
252
253
// Clear Callback
254
if ( timeoutid_mainloop !== null ) {
255
window.clearTimeout( timeoutid_mainloop );
256
}
257
258
// Repeat This Method
259
timeoutid_mainloop = window.setTimeout( arguments.callee, 40 );
260
261
}();
262
}, false );
263
264
// To Set Uniforms When Rendering. Attached by 'SENORWEBGL1.Object.registerUniforms'
265
// 'parameter' is defined on 'SENORWEBGL1.Object.pict' or 'SENORWEBGL1.ArrayObject.pict'
266
// Use 'self' instead of 'SENORWEBGL1' Context, Use 'this' insted of 'SENORWEBGL1.Object'
267
function setUniforms( parameter, self ) {
268
if ( typeof parameter.attributes.view !== "object" || parameter.attributes.view === null ) {
269
parameter.attributes.view = {};
270
parameter.attributes.view.p_camera = [0.0, 0.0, 3.0];
271
parameter.attributes.view.p_target = [0.0, 0.0, 0.0];
272
parameter.attributes.view.v_up = [0.0, 1.0, 0.0];
273
}
274
if ( typeof parameter.attributes.pers !== "object" || parameter.attributes.pers === null ) {
275
parameter.attributes.pers = {};
276
parameter.attributes.pers.fovy = 90;
277
parameter.attributes.pers.aspect = ATTACHER.aspect;
278
parameter.attributes.pers.near = 0.2;
279
parameter.attributes.pers.far = 4.0;
280
}
281
if ( typeof parameter.attributes.delta !== "number" || parameter.attributes.delta === null ) {
282
parameter.attributes.delta = 0;
283
}
284
285
var delta = parameter.attributes.delta;
286
var shaders = this.shaders[parameter.shader_index];
287
288
this.angle += this.angle_speed * delta;
289
if ( this.angle > 360 ) {
290
this.angle -= 360;
291
}
292
if ( this.angle < -360 ) {
293
this.angle += 360;
294
}
295
296
var uTMatrix = self.gl.getUniformLocation( shaders.program, "uTMatrix" );
297
var trans_mat4 = SENORUTL.translateMat4([this.x, this.y, this.z]);
298
self.gl.uniformMatrix4fv( uTMatrix, false, new Float32Array( trans_mat4 ) );
299
300
var uSMatrix = self.gl.getUniformLocation( shaders.program, "uSMatrix" );
301
var scale_mat4 = SENORUTL.scaleMat4([this.sx, this.sy, this.sz]);
302
self.gl.uniformMatrix4fv( uSMatrix, false, new Float32Array( scale_mat4 ) );
303
304
var uRArray0 = self.gl.getUniformLocation( shaders.program, "uRArray[0]" );
305
self.gl.uniform1f( uRArray0, this.angle );
306
var uRArray1 = self.gl.getUniformLocation( shaders.program, "uRArray[1]" );
307
self.gl.uniform1f( uRArray1, this.rx );
308
var uRArray2 = self.gl.getUniformLocation( shaders.program, "uRArray[2]" );
309
self.gl.uniform1f( uRArray2, this.ry );
310
var uRArray3 = self.gl.getUniformLocation( shaders.program, "uRArray[3]" );
311
self.gl.uniform1f( uRArray3, this.rz );
312
313
var uVMatrix= self.gl.getUniformLocation( shaders.program, "uVMatrix" );
314
// First is camera position, second is target position, third is up definition
315
self.gl.uniformMatrix4fv( uVMatrix, false, new Float32Array( SENORUTL.makeViewMat4( parameter.attributes.view.p_camera, parameter.attributes.view.p_target, parameter.attributes.view.v_up) ) );
316
317
var uPMatrix = self.gl.getUniformLocation( shaders.program, "uPMatrix" );
318
self.gl.uniformMatrix4fv( uPMatrix, false, new Float32Array( SENORUTL.perspectiveMat4( parameter.attributes.pers.fovy, parameter.attributes.pers.aspect, parameter.attributes.pers.near, parameter.attributes.pers.far) ) );
319
320
}
321
})();
322
</script>
232 Views