58 lines
1.5 KiB
HTML
58 lines
1.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Document</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div>
|
||
|
|
<canvas id="glcanvas" width="512" height="512">
|
||
|
|
|
||
|
|
</canvas>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script id="vertex-shader" type="x-shader/x-vertex">
|
||
|
|
attribute vec2 aVertexPosition;
|
||
|
|
|
||
|
|
uniform float uScalingFactor;
|
||
|
|
uniform vec2 uRotationVector;
|
||
|
|
|
||
|
|
varying vec2 uv;
|
||
|
|
|
||
|
|
void main() {
|
||
|
|
vec2 rotatedPosition = vec2(
|
||
|
|
aVertexPosition.x * uRotationVector.y +
|
||
|
|
aVertexPosition.y * uRotationVector.x,
|
||
|
|
aVertexPosition.y * uRotationVector.y -
|
||
|
|
aVertexPosition.x * uRotationVector.x
|
||
|
|
);
|
||
|
|
|
||
|
|
gl_Position = vec4(rotatedPosition * uScalingFactor, 0.0, 1.0);
|
||
|
|
|
||
|
|
uv = (aVertexPosition + vec2(1.0, 1.0)) / 2.0;
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<script id="fragment-shader" type="x-shader/x-fragment">
|
||
|
|
#ifdef GL_ES
|
||
|
|
precision highp float;
|
||
|
|
#endif
|
||
|
|
|
||
|
|
uniform vec4 uGlobalColor;
|
||
|
|
uniform sampler2D tex;
|
||
|
|
varying vec2 uv;
|
||
|
|
|
||
|
|
void main() {
|
||
|
|
vec2 coord = vec2(uv.x, 1.0 - uv.y);
|
||
|
|
//mediump vec2 coord = vec2(gl_FragCoord.x/512.0, 1.0 - (gl_FragCoord.y/512.0));
|
||
|
|
mediump vec4 sample = texture2D(tex, coord);
|
||
|
|
gl_FragColor = vec4(sample.b, sample.r, sample.g, 1.0);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script src="test2/app.js">
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|