cube test
This commit is contained in:
parent
fcf0ee4b47
commit
7caf01a4ae
4 changed files with 412 additions and 40 deletions
|
@ -2,26 +2,27 @@
|
|||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>WebGL Demo</title>
|
||||
<script id="vertex-shader-2d" type="notjs">
|
||||
<meta charset="utf-8" />
|
||||
<title>WebGL Demo</title>
|
||||
<script id="vertex-shader-2d" type="notjs">
|
||||
|
||||
// an attribute will receive data from a buffer
|
||||
attribute vec4 a_position;
|
||||
varying vec4 b_position;
|
||||
uniform mat4 mat_thing;
|
||||
uniform mat4 mvp_thing;
|
||||
|
||||
// all shaders have a main function
|
||||
void main() {
|
||||
|
||||
// gl_Position is a special variable a vertex shader
|
||||
// is responsible for setting
|
||||
gl_Position = a_position * mat_thing;
|
||||
gl_Position = mat_thing * mvp_thing * a_position ;
|
||||
b_position = a_position;
|
||||
}
|
||||
|
||||
</script>
|
||||
<script id="fragment-shader-2d" type="notjs">
|
||||
<script id="fragment-shader-2d" type="notjs">
|
||||
|
||||
// fragment shaders don't have a default precision so we need
|
||||
// to pick one. mediump is a good default
|
||||
|
@ -29,25 +30,33 @@
|
|||
varying vec4 b_position;
|
||||
uniform float size_thing;
|
||||
uniform float dist_thing;
|
||||
uniform bool is_fg;
|
||||
|
||||
void main() {
|
||||
// gl_FragColor is a special variable a fragment shader
|
||||
// is responsible for setting
|
||||
if (is_fg) {
|
||||
gl_FragColor = vec4(b_position.xyz,1) * 0.2 + vec4(0.3,0.3,0.3,1) * 0.8;
|
||||
return;
|
||||
}
|
||||
float dist = (log(distance(b_position.xy,vec2(0.0))) - size_thing + dist_thing) / log(2.0) * 0.1;
|
||||
gl_FragColor = vec4((mod(dist,0.1) - 0.1 + 0.1 * dist_thing) * 50.0 * vec3(1,1,1),1); // return redish-purple
|
||||
}
|
||||
|
||||
</script>
|
||||
<script src="/js/twgl.min.js" type="module"></script>
|
||||
<script src="/js/index.js" type="module"></script>
|
||||
<link rel="stylesheet" href="main.css">
|
||||
|
||||
<script src="/js/cube.js"></script>
|
||||
<script src="/js/mat.js"></script>
|
||||
<script src="/js/twgl.min.js" type="module"></script>
|
||||
<script src="/js/index.js" type="module"></script>
|
||||
<link rel="stylesheet" href="main.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<canvas id="c" width="640" height="480"></canvas>
|
||||
<div class='hud'>
|
||||
hud
|
||||
</div>
|
||||
<canvas id="c" width="640" height="480"></canvas>
|
||||
<div class='hud'>
|
||||
hud
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
Loading…
Add table
Add a link
Reference in a new issue