forked from sketchpunk/FunWithWebGL2
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtest.html
162 lines (129 loc) · 4.55 KB
/
test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html>
<head>
<style>
html,body{margin:0px; padding:0px; width:100%; height:100%;}
body{background-color:#404040;}
canvas{border:0px solid black;}
div{display:flex; width:100%; height:100%; align-items:center; justify-content:center;}
#lblFPS{position:absolute; top:0px; left:0px; background:gray; color:white; font-weight:bold; padding:5px 5px; width:40px; text-align:center; font-family:arial; font-size:13px;}
</style>
<script src="fungi.core.js"></script>
<script src="fungi.primatives.js"></script>
<script src="fungi.KBMCtrl.js"></script>
<script src="fungi.Debug.js"></script>
<script src="fungiApp.js"></script>
<script src="spline.js"></script>
<script>
//LEO - Pink - Try
var gFbo,gModel,gPostShader,gPostQuad;
var gPoints,gPicking,gDMesh;
var gSpline;
window.addEventListener("load",function(){
FungiApp.startup();
gFbo = Fungi.Shaders.FBO.build("Fungi2Buf",2,true);
FungiApp.ctrlCamera.addHandler("pick",Picking)
.setDownOverride(Picking.onDownOverride);
//.......................................................
//Create Shaders and Materials
Fungi.Shaders.New("DomShader","vertex_shader","fragment_shader")
.prepareUniforms(Fungi.UNI_MODEL_MAT_NAME,"mat4")
.prepareUniformBlocks(FungiApp.uboTransform,0);
Fungi.Shaders.Material.create("MatDomShader","DomShader");
gPostShader = Fungi.Shaders.New("PostShader","vertex_post","fragment_post")
.prepareUniforms("tex0","tex","tex1","tex")
.setUniforms("tex0",gFbo.colorBuf[0]);
Fungi.Shaders.Material.create("MatPostShader","PostShader").useModelMatrix = false;
//.......................................................
//Prepare our Renderables
gSpline = new Spline(2);
var spEditor = SplineEditor.getRenderable(10,gSpline);
FungiApp.scene.push(spEditor);
gModel = new Fungi.Renderable(Fungi.Primatives.FacedCube(),"MatDomShader")
.setPosition(0,0.5,0).setScale(0.2,0.2,0.2);
FungiApp.scene.push(gModel);
gPostQuad = new Fungi.Renderable(Fungi.Primatives.Quad2U(),"MatPostShader");
//.......................................................
//Start Render Loop
FungiApp.renderLoop.start();
//onRender(0.1);
});
var i = 0,inc = 0.2;
function onRender(dt){
var pos = [0,0,0], dir = [0,0,0];
i += inc * dt;
gSpline.getPosition(i,pos);
gModel.position.copy(pos);
gSpline.getDirection(i,dir);
Fungi.Maths.Quaternion.lookRotation(dir, [0,1,0], gModel.rotation);
if(i >= 1){ inc *= -1; i = 1; }
else if(i <= 0){ inc *= -1; i = 0; }
FungiApp.update();
Fungi.Render(FungiApp.scene);
}
Fungi.Render.onPreRender = function(f){
Fungi.gl.bindFramebuffer(Fungi.gl.FRAMEBUFFER,gFbo.id);
Fungi.gl.clear(Fungi.gl.COLOR_BUFFER_BIT | Fungi.gl.DEPTH_BUFFER_BIT);
}
Fungi.Render.onPostRender = function(f){
Fungi.gl.bindFramebuffer(Fungi.gl.FRAMEBUFFER,null);
f.prepareNext(gPostQuad).draw();
}
</script>
</head>
<body>
<div><canvas id="FungiCanvas"></canvas></div>
<span id="lblFPS">0</div>
<script id="vertex_shader" type="x-shader/x-vertex">#version 300 es
layout(location=0) in vec4 a_position;
layout(location=1) in vec3 a_norm;
layout(location=2) in vec2 a_uv;
uniform UBOTransform{
mat4 matProjection;
mat4 matCameraView;
vec3 posCamera;
};
uniform mat4 uModalMatrix;
uniform mat3 uNormalMatrix;
out highp vec2 vUV;
out lowp vec3 color;
void main(void){
//gl_PointSize = 8.0f;
//color = vec3(0.0,0.0,0.0);
if(a_position.w == 0.0) color = vec3(1.0,0.0,0.0);
else if(a_position.w == 1.0) color = vec3(0.0,1.0,0.0);
else color = vec3(0.6,0.6,0.6);
vUV = a_uv;
gl_Position = matProjection * matCameraView * uModalMatrix * vec4(a_position.xyz, 1.0);
}
</script>
<script id="fragment_shader" type="x-shader/x-fragment">#version 300 es
precision mediump float;
in highp vec2 vUV;
in lowp vec3 color;
out vec4 outColor;
void main(void){
outColor = vec4(color,1.0);
}
</script>
<script id="vertex_post" type="x-shader/x-vertex">#version 300 es
layout(location=0) in vec4 a_position;
layout(location=2) in vec2 a_uv;
out highp vec2 vUV;
void main(void){
vUV = vec2(a_uv.s,1.0-a_uv.t);
gl_Position = vec4(a_position.xyz, 1.0);
}
</script>
<script id="fragment_post" type="x-shader/x-fragment">#version 300 es
precision mediump float;
in highp vec2 vUV;
uniform sampler2D tex0;
uniform sampler2D tex1;
out vec4 outColor;
void main(void){
outColor = texture(tex0,vUV);
}
</script>
</body>
</html>