OpenGL pixel shader: Difference between revisions
m
Undo revision 135832 by Rdm (talk)
m (Javascript: make script content-type more closely adhere to media type spec from rfc 2045) |
|||
Line 87:
}</lang>
=={{header|JavaScript}} (WebGL) ==
<html style="margin: 0;">▼
▲<lang html><html style="margin: 0;">
<head>
<title>Fragment Shader WebGL Example</title>
Line 93 ⟶ 95:
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 100 ⟶ 102:
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 118 ⟶ 120:
// Create shader object
var shader;
shader = gl.createShader(gl.FRAGMENT_SHADER);
else if (scriptElement.type == "x-shader/x-vertex")
shader = gl.createShader(gl.VERTEX_SHADER);
else
throw new Error("unknown shader script type");
// Compile shader from source
gl.shaderSource(shader, scriptElement.textContent);
Line 154 ⟶ 161:
// And specify that we will be actually delivering data to those attributes.
gl.enableVertexAttribArray(positionAttr);
var timeUniform = gl.getUniformLocation(shaderProgram, "u_time");
Line 177 ⟶ 184:
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 188 ⟶ 195:
while (e = gl.getError())
console.log("GL error", e);
}
setInterval(frame, 1000/20);
</script>
</body>
</html></lang>
| |||