ftgplane/index.html at master · mlabbe/ftgplane · GitHub

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
<!DOCTYPE html>
<!-- Copyright (C) 2011-2012 Frogtoss Games, Inc.  See glmike.js for license. -->
<HTML>
  <HEAD>
    <TITLE>glMikeFirst</TITLE>
    <META http-equiv="content-type" content="text-html; charset=ISO-8859-1">

    <SCRIPT type="text/javascript" src="lib/gl-matrix.js"></SCRIPT>
    <SCRIPT type="text/javascript" src="lib/webgl-utils.js"></SCRIPT>
    <SCRIPT type="text/javascript" src="lib/ftgplane.js"></SCRIPT>
    <SCRIPt type="text/javascript" src="lib/webgl-debug.js"></SCRIPT>
    <SCRIPT src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></SCRIPT>
    <SCRIPT src="glmike.js" type="text/javascript"></SCRIPT>

    <!-- Post shading -->
    <SCRIPT id="vpost" type="x-shader/x-vertex">
                   // Common vertex post process shader -- perfect for drawTextureToViewport
                   attribute vec3 aVertexPosition;
                   attribute vec2 aTextureCoord;

                   uniform mat4 uMVMatrix;
                   uniform mat4 uPMatrix;
                   varying vec2 vTextureCoord;

                   void main( void ) {
                       gl_Position = uPMatrix * uMVMatrix * vec4( aVertexPosition, 1 );
                       vTextureCoord = aTextureCoord;
                   }
    </SCRIPT>

    <SCRIPT id="fpost" type="x-shader/x-fragment">
                   precision mediump float;
                   varying vec2 vTextureCoord;
                   uniform sampler2D uSampler;

                   void main( void ) {
                       vec4 col = texture2D( uSampler, vec2( vTextureCoord.s, vTextureCoord.t ) );

                       gl_FragColor = col;
                   }
    </SCRIPT>


    <SCRIPT id="fpostGrayscale" type="x-shader/x-fragment">
                   precision mediump float;
                   varying vec2 vTextureCoord;
                   uniform sampler2D uSampler;
                   uniform float grayness; /* 0 to 1 */

                   void main( void ) {
                       vec4 col = texture2D( uSampler, vec2( vTextureCoord.s, vTextureCoord.t ) );

                       vec3 gray = mix( col.rgb, vec3( dot( col.rgb, vec3( 0.3, 0.59, 0.11 ) ) ), grayness );
                       //vec3 gray = mix( col.rgb, vec3( dot( col.rgb, vec3( 0.3, 0.59, 0.11 ) ) ), 0.8 );

                       gl_FragColor = vec4( gray, col.a );
                   }
    </SCRIPT>

    <!-- Forward shading -->
    <SCRIPT id="vdef" type="x-shader/x-vertex">
                   // A copy of the def vshader from the js source.
                   attribute vec3 aVertexPosition;
                   attribute vec2 aTextureCoord;

                   uniform mat4 uMVMatrix;
                   uniform mat4 uPMatrix;
                   uniform mat4 uBoxMatrix;

                   varying vec2 vTextureCoord;

                   void main( void ) {
                       gl_Position = uPMatrix * uMVMatrix * uBoxMatrix * vec4(aVertexPosition, 1 );
                       vTextureCoord = aTextureCoord;
                   }
    </SCRIPT>


  </HEAD>

  <BODY onLoad="webGLStart()" style="width: 100%, height: 100%, body: 100%">

    <CANVAS id="maincanvas" style="border: none; background-color: black;" width="1280" height="720"></CANVAS>
    <P>Michael Labbe's plane demo</A>.

  </BODY>


</HTML>