OpenGL pixel shader: Difference between revisions
Content added Content deleted
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: | Line 87: | ||
}</lang> |
}</lang> |
||
⚫ | |||
=={{header|JavaScript}} (WebGL) == |
|||
⚫ | |||
<head> |
<head> |
||
<title>Fragment Shader WebGL Example</title> |
<title>Fragment Shader WebGL Example</title> |
||
Line 95: | Line 93: | ||
without quoting it inside of JavaScript; the web browser doesn't |
without quoting it inside of JavaScript; the web browser doesn't |
||
actually do anything besides store the text of these. --> |
actually do anything besides store the text of these. --> |
||
<script id="shader-fs" type=" |
<script id="shader-fs" type="text/x-fragment_shader"> |
||
precision highp float; |
precision highp float; |
||
uniform float u_time; |
uniform float u_time; |
||
Line 102: | Line 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); |
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); |
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); |
gl_FragColor = vec4(mod(foo + vec3(u_time), 1.0), 1.0); |
||
} |
} |
||
</script> |
</script> |
||
<script id="shader-vs" type=" |
<script id="shader-vs" type="text/x-vertex_shader"> |
||
attribute vec3 a_position; |
attribute vec3 a_position; |
||
attribute vec4 a_color; |
attribute vec4 a_color; |
||
Line 120: | Line 118: | ||
// Create shader object |
// Create shader object |
||
var shader; |
var shader; |
||
shader= gl.createShader(gl[scriptElement.type.replace('text/x-','').toUpperCase()]); |
|||
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 |
// Compile shader from source |
||
gl.shaderSource(shader, scriptElement.textContent); |
gl.shaderSource(shader, scriptElement.textContent); |
||
Line 161: | Line 154: | ||
// And specify that we will be actually delivering data to those attributes. |
// And specify that we will be actually delivering data to those attributes. |
||
gl.enableVertexAttribArray(positionAttr); |
gl.enableVertexAttribArray(positionAttr); |
||
var timeUniform = gl.getUniformLocation(shaderProgram, "u_time"); |
var timeUniform = gl.getUniformLocation(shaderProgram, "u_time"); |
||
Line 184: | Line 177: | ||
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); |
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); |
||
gl.vertexAttribPointer(positionAttr, 3, gl.FLOAT, false, 0, 0); |
gl.vertexAttribPointer(positionAttr, 3, gl.FLOAT, false, 0, 0); |
||
var t0 = Date.now(); |
var t0 = Date.now(); |
||
function frame() { |
function frame() { |
||
gl.uniform1f(timeUniform, (Date.now() - t0) / 1000); |
gl.uniform1f(timeUniform, (Date.now() - t0) / 1000); |
||
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); |
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); |
||
gl.drawArrays(gl.TRIANGLES, 0, numVertices); |
gl.drawArrays(gl.TRIANGLES, 0, numVertices); |
||
Line 195: | Line 188: | ||
while (e = gl.getError()) |
while (e = gl.getError()) |
||
console.log("GL error", e); |
console.log("GL error", e); |
||
} |
} |
||
setInterval(frame, 1000/20); |
setInterval(frame, 1000/20); |
||
</script> |
</script> |
||
</body> |
</body> |
||
</html |
</html> |