Skip to content

Commit 3f36795

Browse files
ivancerasivanceras
committed
More webgl examples
1 parent 0906ec5 commit 3f36795

File tree

1 file changed

+219
-0
lines changed

1 file changed

+219
-0
lines changed

Diff for: ‎cloud-webgl.html

+219
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
<html>
2+
<head>
3+
<style>
4+
body{
5+
background-color: #2fdbba;
6+
font-size:32px;
7+
}
8+
.hello{
9+
position:absolute;
10+
top: 50px;
11+
}
12+
#glcanvas{
13+
position:absolute;
14+
}
15+
</style>
16+
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Basic_2D_animation_example -->
17+
<script id="vertex-shader" type="x-shader/x-vertex">
18+
attribute vec3 aVertexPosition;
19+
20+
uniform vec2 uScalingFactor;
21+
uniform vec2 uRotationVector;
22+
uniform float uTime;
23+
varying vec4 color;
24+
25+
void main() {
26+
vec2 rotatedPosition = vec2(
27+
aVertexPosition.x * uRotationVector.y +
28+
aVertexPosition.y * uRotationVector.x,
29+
aVertexPosition.y * uRotationVector.y -
30+
aVertexPosition.x * uRotationVector.x
31+
);
32+
33+
gl_Position = vec4(rotatedPosition * uScalingFactor, 0.0, 1.0);
34+
color = vec4(gl_Position.x, gl_Position.y, uTime, 1.0);
35+
}
36+
</script><script id="fragment-shader" type="x-shader/x-fragment">
37+
#ifdef GL_ES
38+
precision highp float;
39+
#endif
40+
41+
uniform vec4 uGlobalColor;
42+
varying vec4 color;
43+
44+
void main() {
45+
//gl_FragColor = uGlobalColor;
46+
gl_FragColor = vec4(color.r, color.g, color.b, color.a);
47+
}
48+
</script>
49+
<script>
50+
let gl = null;
51+
let glCanvas = null;
52+
53+
// Aspect ratio and coordinate system
54+
// details
55+
56+
let aspectRatio;
57+
let currentRotation = [0, 1];
58+
let currentScale = [1.0, 1.0];
59+
60+
// Vertex information
61+
62+
let vertexArray;
63+
let vertexBuffer;
64+
let vertexNumComponents;
65+
let vertexCount;
66+
67+
// Rendering data shared with the
68+
// scalers.
69+
70+
let uScalingFactor;
71+
let uGlobalColor;
72+
let uRotationVector;
73+
let aVertexPosition;
74+
let uTime; //time supplied
75+
76+
// Animation timing
77+
78+
let previousTime = 0.0;
79+
let degreesPerSecond = 90.0;
80+
window.addEventListener("load", startup, false);
81+
82+
function startup() {
83+
glCanvas = document.getElementById("glcanvas");
84+
gl = glCanvas.getContext("webgl");
85+
86+
const shaderSet = [{
87+
type: gl.VERTEX_SHADER,
88+
id: "vertex-shader"
89+
},
90+
{
91+
type: gl.FRAGMENT_SHADER,
92+
id: "fragment-shader"
93+
}
94+
];
95+
96+
shaderProgram = buildShaderProgram(shaderSet);
97+
98+
aspectRatio = glCanvas.width / glCanvas.height;
99+
currentRotation = [0, 1];
100+
currentScale = [1.0, aspectRatio];
101+
102+
vertexArray = new Float32Array([
103+
-0.5, 0.5,0,1,
104+
0.5, 0.5,0,1,
105+
0.5, -0.5,0,1,
106+
-0.5, 0.5,0,1,
107+
0.5, -0.5,0,1,
108+
-0.5, -0.5,0,1
109+
]);
110+
111+
vertexBuffer = gl.createBuffer();
112+
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
113+
gl.bufferData(gl.ARRAY_BUFFER, vertexArray, gl.STATIC_DRAW);
114+
115+
vertexNumComponents = 4;
116+
vertexCount = vertexArray.length / vertexNumComponents;
117+
118+
currentAngle = 0.0;
119+
rotationRate = 6;
120+
121+
animateScene();
122+
}
123+
124+
function buildShaderProgram(shaderInfo) {
125+
let program = gl.createProgram();
126+
127+
shaderInfo.forEach(function (desc) {
128+
let shader = compileShader(desc.id, desc.type);
129+
130+
if (shader) {
131+
gl.attachShader(program, shader);
132+
}
133+
});
134+
135+
gl.linkProgram(program)
136+
137+
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
138+
console.log("Error linking shader program:");
139+
console.log(gl.getProgramInfoLog(program));
140+
}
141+
142+
return program;
143+
}
144+
145+
function compileShader(id, type) {
146+
let code = document.getElementById(id).firstChild.nodeValue;
147+
let shader = gl.createShader(type);
148+
149+
gl.shaderSource(shader, code);
150+
gl.compileShader(shader);
151+
152+
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
153+
console.log(`Error compiling ${type === gl.VERTEX_SHADER ? "vertex" : "fragment"} shader:`);
154+
console.log(gl.getShaderInfoLog(shader));
155+
}
156+
return shader;
157+
}
158+
159+
function animateScene() {
160+
let time = window.performance.now() % 255;
161+
//console.log("animating scene..",time / 255);
162+
gl.viewport(0, 0, glCanvas.width, glCanvas.height);
163+
//gl.clearColor(0.8, 0.9, 1.0, 1.0);
164+
gl.clearColor(0,0,0,0);
165+
gl.clear(gl.COLOR_BUFFER_BIT);
166+
167+
let radians = currentAngle * Math.PI / 180.0;
168+
currentRotation[0] = Math.sin(radians);
169+
currentRotation[1] = Math.cos(radians);
170+
171+
gl.useProgram(shaderProgram);
172+
173+
uScalingFactor =
174+
gl.getUniformLocation(shaderProgram, "uScalingFactor");
175+
uGlobalColor =
176+
gl.getUniformLocation(shaderProgram, "uGlobalColor");
177+
uRotationVector =
178+
gl.getUniformLocation(shaderProgram, "uRotationVector");
179+
180+
uTime =
181+
gl.getUniformLocation(shaderProgram, "time");
182+
183+
gl.uniform2fv(uScalingFactor, currentScale);
184+
gl.uniform2fv(uRotationVector, currentRotation);
185+
gl.uniform4fv(uGlobalColor, [0.1, 0.7, 0.2, 1.0]);
186+
gl.uniform1f(uTime, time);
187+
188+
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
189+
190+
aVertexPosition =
191+
gl.getAttribLocation(shaderProgram, "aVertexPosition");
192+
193+
gl.enableVertexAttribArray(aVertexPosition);
194+
gl.vertexAttribPointer(aVertexPosition, vertexNumComponents,
195+
gl.FLOAT, false, 0, 0);
196+
197+
gl.drawArrays(gl.TRIANGLES, 0, vertexCount);
198+
199+
window.requestAnimationFrame(function (currentTime) {
200+
let deltaAngle = ((currentTime - previousTime) / 1000.0) *
201+
degreesPerSecond;
202+
203+
currentAngle = (currentAngle + deltaAngle) % 360;
204+
205+
previousTime = currentTime;
206+
animateScene();
207+
});
208+
}
209+
210+
</script>
211+
</head>
212+
<body>
213+
<div class="hello">Hello, dont mind me..</div>
214+
<canvas id="glcanvas" width="600" height="460">
215+
Oh no! Your browser doesn't support canvas!
216+
</canvas>
217+
</body>
218+
</html>
219+

0 commit comments

Comments
 (0)