luruke

precision highp float;
uniform float uTime;
uniform sampler2D texture;
uniform sampler2D uWind;
uniform sampler2D uTrail;

void main() {
  float pixelHeight = 1.0 / RESOLUTION.y;
  float pixelWidth = 1.0 / RESOLUTION.x;
  vec2 uv = gl_FragCoord.xy / RESOLUTION.xy;

luruke

const POINTS = 256;
const vertices = new Float32Array(POINTS * 4);
const ids = new Float32Array(POINTS);

for (let i = 0; i < POINTS * 4; i += 4) {
  vertices[i + 0] = randomFloat(-5, 5);
  vertices[i + 1] = randomFloat(-5, 5);
  vertices[i + 2] = randomFloat(-5, 5);
  vertices[i + 3] = randomFloat(0, 4); // random ID, for different sizes
}

luruke

this.geometry = new BufferGeometry();
this.geometry.addAttribute('position', new BufferAttribute(ids, 1));

this.material = new RawShaderMaterial({
  name: 'Particles',
  fragmentShader: `
    precision highp float;
    void main() {
      gl_FragColor = vec4(0.584,0.052,0.880, 1.0);
    }

luruke

this.plane = new PlaneBufferGeometry(1, 1, 1, 1);
this.viewerMaterial = new RawShaderMaterial({
  blending: AdditiveBlending,
  vertexShader: `
  precision highp float;
  uniform mat4 modelViewMatrix;
  uniform mat4 projectionMatrix;

  attribute vec2 uv;

luruke

// Buffer
this.buffer = new FBO({
  geometry: this.geometry,
  width: SIZE_BUFFER,
  height: SIZE_BUFFER,
  name: 'buffer particles',
  shader: `
  precision highp float;
  uniform sampler2D texture;
  uniform sampler2D uImage;

luruke

import { component } from 'bidello';
import { visibility } from '../bidello';
import FBO from './fbo';
import { pointer } from '../bidello/index';

import {
  Vector2,
  LinearFilter,
} from 'three';

luruke

vec2 offsetr = vec2(trail.r * 0.003);
vec2 offsetg = vec2(trail.r * 0.005);
vec2 offsetb = vec2(trail.r * 0.007);

float r = texture2D(uScene, uv.xy + offsetr).x;
float g = texture2D(uScene, uv.xy + offsetg).y;
float b = texture2D(uScene, uv.xy + offsetb).z;

vec3 color = vec3(r, g, b);

luruke

<a href="#" data-component="trackable" data-type="button">Yo, button</a>

luruke

import { Component } from 'kapla';
import dom from 'gl/dom';

export default class extends Component {
  init() {
    dom.register(this.$el);
  }

  destroy() {
    dom.unregister(this.$el);

luruke

import Button from './button/button';
import Person from './person/person';
import Footer from './footer/footer';

const elements = {
  button: Button,
  person: Person,
  footer: Footer,
  // ...
};