| main.jsView |
|---|
| 5 | 5 … | var grid = require('grid-mesh') |
| 6 | 6 … | var wireframe = require('screen-projected-lines') |
| 7 | 7 … | var feedback = require('regl-feedback') |
| 8 | 8 … | var mat4 = require('gl-mat4') |
| 9 … | +var teapot = require('teapot') |
| 10 … | +var anormals = require('angle-normals') |
| 9 | 11 … | |
| 10 | 12 … | var fbtex = regl.texture() |
| 11 | 13 … | var draw = { |
| 12 | 14 … | grid: createGrid(regl,30), |
| 13 | 15 … | gridbg: createGridBg(regl,30), |
| 16 … | + orbit: orbit(regl), |
| 14 | 17 … | bg: createBg(regl), |
| 15 | 18 … | fb: feedback(regl, ` |
| 16 | 19 … | vec3 sample (vec2 uv, sampler2D tex) { |
| 17 | 20 … | float px = 256.0; |
| 22 | 25 … | } |
| 23 | 26 … | `) |
| 24 | 27 … | } |
| 25 | 28 … | var rmat = [], last = 0 |
| 29 … | +var orbits = [] |
| 30 … | +for (var i = 0; i < 20; i++) { |
| 31 … | + orbits.push({ offset: i/20*100 }) |
| 32 … | +} |
| 26 | 33 … | regl.frame(function (context) { |
| 27 | 34 … | regl.clear({ color: [0,0,0,1], depth: true }) |
| 28 | 35 … | draw.fb({ texture: fbtex }) |
| 29 | 36 … | draw.bg() |
| 31 | 38 … | mat4.rotateY(rmat,rmat,context.time*0.05) |
| 32 | 39 … | camera(function () { |
| 33 | 40 … | draw.grid({ rmat: rmat }) |
| 34 | 41 … | draw.gridbg({ rmat: rmat }) |
| 42 … | + draw.orbit(orbits) |
| 35 | 43 … | fbtex({ copy: true, mag: 'linear', min: 'linear' }) |
| 36 | 44 … | }) |
| 37 | 45 … | }) |
| 38 | 46 … | |
| 47 … | +function orbit (regl) { |
| 48 … | + var model = [], offset = [] |
| 49 … | + var mesh = teapot |
| 50 … | + return regl({ |
| 51 … | + frag: glsl` |
| 52 … | + precision highp float; |
| 53 … | + #pragma glslify: snoise = require('glsl-noise/simplex/4d') |
| 54 … | + #pragma glslify: hsl2rgb = require('glsl-hsl2rgb') |
| 55 … | + #pragma glslify: dither = require('glsl-dither/8x8') |
| 56 … | + uniform float time; |
| 57 … | + varying vec3 vpos; |
| 58 … | + void main () { |
| 59 … | + float h = snoise(vec4(vpos*0.2,time*2.0))*0.5+0.5; |
| 60 … | + vec3 c = hsl2rgb(vec3(h*0.2,1,0.5)); |
| 61 … | + gl_FragColor = vec4(dither(gl_FragCoord.xy,c) ,1); |
| 62 … | + } |
| 63 … | + `, |
| 64 … | + vert: glsl` |
| 65 … | + precision highp float; |
| 66 … | + uniform mat4 projection, view, model; |
| 67 … | + uniform float offset; |
| 68 … | + attribute vec3 position, normal; |
| 69 … | + varying vec3 vpos; |
| 70 … | + uniform float time; |
| 71 … | + void main () { |
| 72 … | + float x = sin(time*0.4); |
| 73 … | + float d = 4.0 + (1.0+sin(x))*0.5*8.0; |
| 74 … | + float t = (time*1.0 + offset) / ${100/(Math.PI*2)}; |
| 75 … | + vec3 op = vec3(sin(t)*140.0, -30.0, cos(t)*90.0); |
| 76 … | + vec3 pos = (model * vec4(position,1)).xyz; |
| 77 … | + vpos = floor((pos*0.5+op)*d)/d+0.5/d |
| 78 … | + + normal*x*0.1; |
| 79 … | + gl_Position = projection * view * vec4(vpos,1); |
| 80 … | + } |
| 81 … | + `, |
| 82 … | + uniforms: { |
| 83 … | + offset: regl.prop('offset'), |
| 84 … | + time: regl.context('time'), |
| 85 … | + model: function (context) { |
| 86 … | + mat4.identity(model) |
| 87 … | + mat4.rotateX(model,model,Math.sin(context.time*0.01)*0.1) |
| 88 … | + mat4.rotateY(model,model,context.time) |
| 89 … | + return model |
| 90 … | + } |
| 91 … | + }, |
| 92 … | + attributes: { |
| 93 … | + position: mesh.positions, |
| 94 … | + normal: anormals(mesh.cells, mesh.positions) |
| 95 … | + }, |
| 96 … | + elements: mesh.cells |
| 97 … | + }) |
| 98 … | +} |
| 99 … | + |
| 39 | 100 … | function createBg (regl) { |
| 40 | 101 … | return regl({ |
| 41 | 102 … | frag: glsl` |
| 42 | 103 … | precision highp float; |