OpenGL pixel shader: Difference between revisions
m
Javascript: make script content-type more closely adhere to media type spec from rfc 2045
m (→{{header|C}}: less flaky noise function (still pretty flaky)) |
m (Javascript: make script content-type more closely adhere to media type spec from rfc 2045) |
||
Line 87:
}</lang>
▲<lang html><html style="margin: 0;">
<head>
<title>Fragment Shader WebGL Example</title>
Line 95 ⟶ 93:
without quoting it inside of JavaScript; the web browser doesn't
actually do anything besides store the text of these. -->
<script id="shader-fs" type="
precision highp float;
uniform float u_time;
Line 102 ⟶ 100:
vec3 foo = vec3(pow(gl_FragCoord.xy, vec2(1.0 + sin(dot(vec4(1.0, 100.0, 0.0, 0.0), gl_FragCoord)))), 0.0);
foo *= mat3(1.2, 3.9, 1.4, 4.1, 0.2, 1.4, 2.5, 1.6, 7.2);
gl_FragColor = vec4(mod(foo + vec3(u_time), 1.0), 1.0);
}
</script>
<script id="shader-vs" type="
attribute vec3 a_position;
attribute vec4 a_color;
Line 120 ⟶ 118:
// Create shader object
var shader;
shader=
// Compile shader from source
gl.shaderSource(shader, scriptElement.textContent);
Line 161 ⟶ 154:
// And specify that we will be actually delivering data to those attributes.
gl.enableVertexAttribArray(positionAttr);
var timeUniform = gl.getUniformLocation(shaderProgram, "u_time");
Line 184 ⟶ 177:
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(positionAttr, 3, gl.FLOAT, false, 0, 0);
var t0 = Date.now();
function frame() {
gl.uniform1f(timeUniform, (Date.now() - t0) / 1000);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, numVertices);
Line 195 ⟶ 188:
while (e = gl.getError())
console.log("GL error", e);
}
setInterval(frame, 1000/20);
</script>
</body>
</html
| |||