https://nullspam.ru/static/BokehDrawable.js

1"use strict";
2
3var GK = GK || {};
4GK.BokehDrawable = function(){
5    var vertex = `
6        attribute vec3 aPosition;
7        attribute vec3 aDirection;
8        attribute float aVariance;
9
10        uniform mat4 uMVMatrix;
11        uniform mat4 uPMatrix;
12
13        uniform float uAlphaSpeed;
14        uniform float uAlphaRange;
15        uniform float uAlphaMul;
16        uniform float uPointSize;
17
18        uniform float uTime;
19        varying float vAlpha;
20
21        #define M_PI 3.1415926535897932384626433832795
22
23        void main(void) {
24            float variedTime = uTime + (aVariance * 10.0);
25            float slowTime = variedTime * 0.1;
26            float dist = sin(mod(slowTime, M_PI / 2.0));
27
28            vAlpha = abs(sin(slowTime * 2.0));
29            vAlpha *= min(abs(tan(variedTime) * uAlphaSpeed * aVariance), uAlphaRange);
30            vAlpha *= uAlphaMul;
31
32            vec3 pos = aPosition;
33            pos += aDirection * dist * 2.0;
34
35            gl_PointSize = aVariance * uPointSize;
36            gl_Position = uPMatrix * uMVMatrix * vec4(pos, 1.0);
37        }
38    `;
39
40    var fragment = `
41        precision mediump float;
42
43        varying float vAlpha;
44        uniform float uAlpha;
45        uniform sampler2D uSampler;
46
47        void main(void) {
48            vec4 color = texture2D(uSampler, gl_PointCoord);
49            gl_FragColor = vec4(color.rgb, color.a * vAlpha * uAlpha);
50        }
51    `;
52
53    var self = this;
54
55    var texture1;
56    var texture2;
57    var vertices;
58    var vertexCount;
59    var arrayBuffer;
60
61    // WebGL
62    var geometryLoaded = false;
63    this.modelMatrix = mat4.create();
64    mat4.identity(this.modelMatrix);
65
66    // Effects
67    this.shaderSpeed = 0.00005;     // default is 0.00005
68    this.alphaRange = 10.0;         // default is 10
69    this.alphaSpeed = 0.1;          // default is 0.1
70    this.alphaMul = 0.05;           // default is 0.05
71    this.alpha = 1.0;
72
73    // default is 84
74    this.pointSize = 84.0;
75
76    this.init = function() {
77        this.program = GK.ProgramManager.create(vertex, fragment);
78        this.createGeometry();
79
80        texture1 = GK.TextureManager.loadTexture("../static/img/texture/bokeh1.png", true, gl.CLAMP_TO_EDGE, gl.CLAMP_TO_EDGE);
81        texture2 = GK.TextureManager.loadTexture("../static/img/texture/bokeh2.png", true, gl.CLAMP_TO_EDGE, gl.CLAMP_TO_EDGE);
82
83        return this;
84    }
85
86    this.createGeometry = function() {
87        vertexCount = 100;
88        vertices = new Float32Array(vertexCount * 7);
89
90        var i = 0;
91        while(i < vertices.length) {
92            var rando1 = Math.random();
93            var rando2 = Math.random();
94            var rando3 = Math.random();
95
96            if (rando3 > 0.9) {
97                rando3 *= 1.5;
98            }
99            if (rando3 > 0.95) {
100                rando3 *= 1.5;
101            }
102            if (rando3 > 0.99) {
103                rando3 *= 1.5;
104            }
105
106            var lat = Math.acos(2.0 * rando1 - 1.0) - (Math.PI * 0.5);
107            var lng = Math.PI * 2.0 * rando2;
108
109            var y = Math.sin(lat);
110            var x = Math.sin(lng);
111            var z = Math.cos(lng);
112
113            var pos = vec3.fromValues(x, y, z);
114            var normal = vec3.create();
115            vec3.normalize(normal, pos);
116
117            vertices[i+0] = pos[0];
118            vertices[i+1] = pos[1];
119            vertices[i+2] = pos[2];
120            vertices[i+3] = normal[0];
121            vertices[i+4] = normal[1];
122            vertices[i+5] = normal[2];
123            vertices[i+6] = Math.PI * Math.random();
124
125            i += 7;
126        }
127
128        arrayBuffer = gl.createBuffer();
129        gl.bindBuffer(gl.ARRAY_BUFFER, arrayBuffer);
130        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
131
132        geometryLoaded = true;
133    }
134
135    this.draw = function(camera, time){
136        if (!texture1.loaded && !texture2.loaded) return;
137        if (!geometryLoaded) return;
138
139        gl.useProgram(this.program.name);
140
141        gl.uniformMatrix4fv(this.program.uniforms.uPMatrix, false, camera.perspectiveMatrix);
142        gl.uniformMatrix4fv(this.program.uniforms.uMVMatrix, false, this.modelMatrix);
143        gl.uniform1f(this.program.uniforms.uTime, time * this.shaderSpeed);
144
145        gl.uniform1f(this.program.uniforms.uAlpha, this.alpha);
146        gl.uniform1f(this.program.uniforms.uAlphaMul, this.alphaMul);
147        gl.uniform1f(this.program.uniforms.uAlphaSpeed, this.alphaSpeed);
148        gl.uniform1f(this.program.uniforms.uAlphaRange, this.alphaRange);
149        gl.uniform1f(this.program.uniforms.uPointSize, this.pointSize);
150
151        gl.activeTexture(gl.TEXTURE0);
152        gl.bindTexture(gl.TEXTURE_2D, texture1);
153        gl.uniform1i(this.program.uniforms.uSampler, 0);
154
155        gl.bindBuffer(gl.ARRAY_BUFFER, arrayBuffer);
156
157        gl.vertexAttribPointer(this.program.attributes.aPosition, 3, gl.FLOAT, false, 28, 0);
158        gl.vertexAttribPointer(this.program.attributes.aDirection, 3, gl.FLOAT, false, 28, 12);
159        gl.vertexAttribPointer(this.program.attributes.aVariance, 1, gl.FLOAT, false, 28, 24);
160
161        gl.enableVertexAttribArray(this.program.attributes.aPosition);
162        gl.enableVertexAttribArray(this.program.attributes.aDirection);
163        gl.enableVertexAttribArray(this.program.attributes.aVariance);
164
165        gl.drawArrays(gl.POINTS, 0, vertexCount / 2);
166
167        gl.activeTexture(gl.TEXTURE0);
168        gl.bindTexture(gl.TEXTURE_2D, texture2);
169        gl.uniform1i(this.program.uniforms.uSampler, 0);
170
171        gl.drawArrays(gl.POINTS, vertexCount / 2, vertexCount / 2);
172    }
173}