/**
   * Constructor function
   * @param {Object} options Options
   */
  constructor( options ) {
    super( options );

    this.vertexShader = shaderParse( glslify( './shader/vert.glsl' ) );
    this.fragmentShader = shaderParse( glslify( './shader/frag.glsl' ) );

    this.lights = true;
    this.side = THREE.DoubleSide;

    this.uniforms = THREE.UniformsUtils.merge( [
      THREE.UniformsLib[ 'lights' ],
      THREE.UniformsLib[ 'ambient' ],
      {
        time: { type: 'f', value: 0.0 },
        speed: { type: 'f', value: 0.2, range: [ 0, 2 ] },
        amplitude: { type: 'f', value: 150.0, range: [ 0, 500 ] },
        diffuse: { type: 'c', value: new THREE.Color( 0x243465 ) },
        opacity: { type: 'f', value: 1 }
      }
    ] );

    this.uniforms.diffuse.hexColor = `#${ this.uniforms.diffuse.value.getHexString() }`;

    this.gui();
  }
Example #2
0
function makeSlice()
{
    let slice = {"fbo": gl.createFramebuffer(),
                 "tex": gl.createTexture(),
                 "buf": gl.createRenderbuffer()};

    slice.prog = makeProgram(
        glslify(__dirname + '/../shaders/slice.vert'),
        glslify(__dirname + '/../shaders/slice.frag'),
        ['model','bounds','frac','aspect'], ['v']);

    gl.bindTexture(gl.TEXTURE_2D, slice.tex);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA,
                  printer.resolution.x, printer.resolution.y,
                  0, gl.RGBA, gl.UNSIGNED_BYTE, null);

    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

    gl.bindTexture(gl.TEXTURE_2D, null);

    return slice;
}
Example #3
0
function _initDepthRenderTarget() {
    var material = new THREE.ShaderMaterial({
        uniforms: {
            uParticleSize: { type: 'f', value: 1 },
            uTexturePosition: {type: 't', value: undef},
            uTexturePrevPosition: {type: 't', value: undef},
            uCameraPosition: {type: 'v3', value: _camera.position},
            uPrevModelViewMatrix: {type: 'm4', value: new THREE.Matrix4()},
            uMotionMultiplier: {type: 'f', value: 1}
        },
        vertexShader: shaderParse(glslify('../glsl/particlesDepth.vert')),
        fragmentShader: shaderParse(glslify('../glsl/particlesDepth.frag')),
        blending: THREE.NoBlending
    });

    _depthRenderTarget = new THREE.WebGLRenderTarget(1, 1, {
        minFilter: THREE.NearestFilter,
        magFilter: THREE.NearestFilter,
        type: THREE.FloatType,
        format: THREE.RGBAFormat,
        stencilBuffer: false,
        transparent: true
    });
    _depthRenderTarget.material = material;
    settings.distanceMap = _depthRenderTarget;
}
Example #4
0
function init(gl, scene) {
  var shape = {};

  shape.root = null;

  shape.uniforms = [
    { name: 'u_projection', location: null },
    { name: 'u_modelView', location: null },
    { name: 'u_normalMatrix', location: null },
    { name: 'u_ambiant_color', location: null },
    { name: 'u_point_lighting_location', location: null },
    { name: 'u_point_lighting_color', location: null }
  ];

  shape.attributes = [
    { name: 'a_position', location: null },
    { name: 'a_normal', location: null }
  ];

  shape.program = utils.createProgram(
    gl,
    glslify('./shaders/shape.vert.glsl'),
    glslify('./shaders/shape.frag.glsl'),
    shape.uniforms, shape.attributes
  );
  scene.shape = shape;
}
function _initAdditiveRenderTarget() {
    var material = new THREE.ShaderMaterial({
        uniforms: {
            uTexturePosition: {type: 't', value: null},
            uDepth: {type: 't', value: _depthRenderTarget},
            uInset: {type: 'f', value: 0},
            uResolution: {type: 'v2', value: _resolution},
            uCameraPosition: {type: 'v3', value: _camera.position}
        },
        vertexShader: shaderParse(glslify('../glsl/particlesAdditive.vert')),
        fragmentShader: shaderParse(glslify('../glsl/particlesAdditive.frag')),

        blending : THREE.CustomBlending,
        blendEquation : THREE.AddEquation,
        blendSrc : THREE.OneFactor,
        blendDst : THREE.OneFactor ,
        blendEquationAlpha : THREE.MinEquation,
        blendSrcAlpha : THREE.OneFactor,
        blendDstAlpha : THREE.OneFactor,
        transparent: true
    });

    _additiveRenderTarget = new THREE.WebGLRenderTarget(1, 1, {
        minFilter: THREE.NearestFilter,
        magFilter: THREE.NearestFilter,
        format: THREE.RGBAFormat,
        type: THREE.FloatType,
        depthWrite: false,
        depthBuffer: false,
        stencilBuffer: false
    });
    _additiveRenderTarget.material = material;
}
Example #6
0
 var createPlaneForFramebuffer = function() {
   var geometry_base = new THREE.PlaneGeometry(1000, 1000);
   var geometry = new THREE.BufferGeometry();
   geometry.fromGeometry(geometry_base);
   var material = new THREE.ShaderMaterial({
     uniforms: {
       time: {
         type: 'f',
         value: 0,
       },
       resolution: {
         type: 'v2',
         value: new THREE.Vector2(window.innerWidth, window.innerHeight)
       },
       texture: {
         type: 't',
         value: render_target,
       },
       texture2: {
         type: 't',
         value: render_target2,
       },
     },
     vertexShader: glslify('../../glsl/sketch/hole/fb.vs'),
     fragmentShader: glslify('../../glsl/sketch/hole/fb.fs'),
     transparent: true
   });
   return new THREE.Mesh(geometry, material);
 };
Example #7
0
function _initBlurRenderTarget() {

    _blurHMaterial = new THREE.ShaderMaterial({
        uniforms: {
            tDiffuse : {type: 't', value: _additiveRenderTarget},
            uResolution : {type: 'v2', value: _resolution},
            uOffset : {type: 'f', value: 0}
        },
        vertexShader: shaderParse(glslify('../glsl/blur.vert')),
        fragmentShader: shaderParse(glslify('../glsl/blurH.frag')),
        transparent: true,
        blending: THREE.NoBlending
    });

    _blurRenderTarget = new THREE.WebGLRenderTarget(1, 1, {
        minFilter: THREE.NearestFilter,
        magFilter: THREE.NearestFilter,
        format: THREE.RGBAFormat,
        type: THREE.FloatType,
        stencilBuffer: false
    });

    _blurVMaterial = new THREE.ShaderMaterial({
        uniforms: {
            tDiffuse : {type: 't', value: _blurRenderTarget},
            uResolution : {type: 'v2', value: _resolution},
            uOffset : {type: 'f', value: 0}
        },
        vertexShader: shaderParse(glslify('../glsl/blur.vert')),
        fragmentShader: shaderParse(glslify('../glsl/blurV.frag')),
        transparent: true,
        blending: THREE.NoBlending
    });

}
Example #8
0
  createModel(gl) {
    let positions = [];
    const NUM_SEGMENTS = 50;
    for (let i = 0; i < NUM_SEGMENTS; i++) {
      positions = [...positions, i, i, i];
    }

    return new Model({
      program: new Program(gl, {
        vs: glslify('./arc-layer-vertex.glsl'),
        fs: glslify('./arc-layer-fragment.glsl'),
        id: 'arc'
      }),
      geometry: new Geometry({
        id: 'arc',
        drawMode: 'LINE_STRIP',
        positions: new Float32Array(positions)
      }),
      isInstanced: true,
      onBeforeRender() {
        this.userData.oldStrokeWidth = gl.getParameter(gl.LINE_WIDTH);
        this.program.gl.lineWidth(this.userData.strokeWidth || 1);
      },
      onAfterRender() {
        this.program.gl.lineWidth(this.userData.oldStrokeWidth || 1);
      }
    });
  }
Example #9
0
 var createSphere = function() {
   var geometry = new THREE.BufferGeometry();
   geometry.fromGeometry(new THREE.OctahedronGeometry(200, 5));
   var material = new THREE.ShaderMaterial({
     uniforms: THREE.UniformsUtils.merge([
       THREE.UniformsLib['lights'],
       {
         time: {
           type: 'f',
           value: 0,
         },
         radius: {
           type: 'f',
           value: 1.0
         },
         distort: {
           type: 'f',
           value: 0.4
         }
       }
     ]),
     vertexShader: glslify('../../glsl/sketch/distort/object.vs'),
     fragmentShader: glslify('../../glsl/sketch/distort/object.fs'),
     lights: true,
   });
   return new THREE.Mesh(geometry, material);
 };
Example #10
0
 createMesh() {
   this.uniforms = {
     time: {
       type: 'f',
       value: 0,
     },
     resolution: {
       type: 'v2',
       value: new THREE.Vector2(window.innerWidth, window.innerHeight),
     },
     render_target: {
       type: 't',
       value: null,
     },
   };
   return new THREE.Mesh(
     new THREE.PlaneGeometry(2, 2),
     new THREE.ShaderMaterial({
       uniforms: this.uniforms,
       vertexShader: glslify('../../glsl/glitch.vs'),
       fragmentShader: glslify('../../glsl/glitch.fs'),
       transparent: true,
     })
   );
 }
Example #11
0
    constructor() {
        super();
        this.startTime = Date.now();
        this.time = 0.0;
        this.timeScale = .2;
        this.repeat = 2.0;
        this.uniforms = {
            time: {
                type: 'f',
                value: this.time
            },
            timeScale: {
                type: 'f',
                value: this.timeScale
            },
            repeat: {
                type: 'f',
                value: this.repeat
            }
        }
        this.mat = new THREE.ShaderMaterial({
            uniforms: this.uniforms,
            vertexShader: glslify('../shaders/plane/plane.vert'),
            fragmentShader: glslify('../shaders/plane/plane.frag'),
            wireframe:true,
        });


        this.geo = new THREE.PlaneGeometry(500, 500,100,100);
        this.mesh = new THREE.Mesh(this.geo, this.mat);
        this.mesh.position.z = -100;

        this.add(this.mesh);

    }
Example #12
0
function init() {

    var PARTICLE_AMOUNT = fbo.AMOUNT;
    var TEXTURE_SIZE = fbo.TEXTURE_SIZE;
    var LINE_AMOUNT = settings.lineAmount;

    // use position x, y for the pointA fboUv and z for line side
    var positions = new Float32Array(LINE_AMOUNT * 2 * 3);
    var oppositeUv = new Float32Array(LINE_AMOUNT * 2 * 2);

    var i4, i6, indexA, indexB;
    for(var i = 0; i < LINE_AMOUNT; ++i ) {
        i4 = i * 4;
        i6 = i * 6;
        indexA = i %  PARTICLE_AMOUNT;
        positions[i6 + 0] = oppositeUv[ i4 + 2] = (indexA % TEXTURE_SIZE) / TEXTURE_SIZE;
        positions[i6 + 1] = oppositeUv[ i4 + 3] = ~~(indexA / TEXTURE_SIZE) / TEXTURE_SIZE;
        positions[i6 + 2] = -1;

        indexB = ~~(math.hash(i * 100.0) * PARTICLE_AMOUNT);
        if(indexB === indexA) indexB = ( indexB + 1 ) % PARTICLE_AMOUNT;
        positions[i6 + 3] = oppositeUv[ i4 + 0] = (indexB % TEXTURE_SIZE) / TEXTURE_SIZE;
        positions[i6 + 4] = oppositeUv[ i4 + 1] = ~~(indexB / TEXTURE_SIZE) / TEXTURE_SIZE;
        positions[i6 + 5] = 1;
    }
    _geometry = new THREE.BufferGeometry();
    _geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ));
    _geometry.addAttribute( 'oppositeUv', new THREE.BufferAttribute( oppositeUv, 2 ));
    _material = new THREE.ShaderMaterial( {
        uniforms: THREE.UniformsUtils.merge( [
            THREE.UniformsLib.fog,
            THREE.UniformsLib.shadowmap, {
            texturePosition: { type: 't', value: null },
            whiteNodesRatio: { type: 'f', value: 1 },
            whiteRatio: { type: 'f', value: 1 }
        }]),
        vertexShader: shaderParse(glslify('../glsl/lines.vert')),
        fragmentShader: shaderParse(glslify('../glsl/lines.frag')),
        linewidth: 1,
        blending: THREE.NoBlending,
        fog: true
    });

    _depthMaterial = new THREE.ShaderMaterial( {
        uniforms: {
            texturePosition: { type: 't', value: null },
        },
        vertexShader: shaderParse(glslify('../glsl/lineDepth.vert')),
        fragmentShader: shaderParse(glslify('../glsl/lineDepth.frag')),
        depthTest: true,
        depthWrite: true
    });

    mesh = exports.mesh = new THREE.LineSegments(_geometry, _material);
    mesh.castShadow = true;
    mesh.receiveShadow = true;
    mesh.frustumCulled = false;
    mesh.customDepthMaterial = _depthMaterial;

}
/**
 * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object.
 * You can use this filter to apply all manor of crazy warping effects
 * Currently the r property of the texture is used to offset the x and the g property of the texture is used to offset the y.
 *
 * @class
 * @extends PIXI.Filter
 * @memberof PIXI.filters
 * @param sprite {PIXI.Sprite} The sprite used for the displacement map. (make sure its added to the scene!)
 * @param scale {number} The scale of the displacement
 */
function DisplacementFilter(sprite, scale)
{
    var maskMatrix = new core.Matrix();
    sprite.renderable = false;

    core.Filter.call(this,
        // vertex shader
//        glslify('./displacement.vert'),
        glslify('../fragments/default-filter-matrix.vert'),
        // fragment shader
        glslify('./displacement.frag')

    );

    this.maskSprite = sprite;
    this.maskMatrix = maskMatrix;

    this.uniforms.mapSampler = sprite.texture;
    this.uniforms.filterMatrix = maskMatrix.toArray(true);
    this.uniforms.scale = { x: 1, y: 1 };

    if (scale === null || scale === undefined)
    {
        scale = 20;
    }

    this.scale = new core.Point(scale, scale);
}
Example #14
0
    constructor() {

        var sphereGeometry = new THREE.SphereGeometry(100, 31, 31);
        this.geom = new THREE.BufferGeometry().fromGeometry(sphereGeometry)

        this.waveAudio = new Float32Array(5580);

        this.geom.addAttribute('offset', new THREE.BufferAttribute(this.waveAudio, 1));

        this.mat = new THREE.ShaderMaterial({
            vertexShader: glslify('../../glsl/sphere-vs.glsl'),
            fragmentShader: glslify('../../glsl/sphere-fs.glsl'),
            uniforms: {
                time: {type: 'f', value: 0}
            },
            transparent: true,
            side: 2,
            wireframe:true
        });

        this.mesh = new THREE.Mesh(this.geom, this.mat);
        this.mesh.position.set(0, 0, 0);
        this.mesh.rotation.x = -1 + Math.PI/2;
        this.mesh.castShadow = true;
        this.mesh.receiveShadow = true;

    }
Example #15
0
	constructor() {

		GL = alfrid.GL;

		super(glslify('../shaders/save.vert'), glslify('../shaders/save.frag') );

	}
Example #16
0
 var createPlaneForPostProcess = function() {
   var geometry_base = new THREE.PlaneGeometry(2, 2);
   var geometry = new THREE.BufferGeometry();
   geometry.fromGeometry(geometry_base);
   var material = new THREE.ShaderMaterial({
     uniforms: {
       time: {
         type: 'f',
         value: 0,
       },
       resolution: {
         type: 'v2',
         value: new THREE.Vector2(window.innerWidth, window.innerHeight)
       },
       acceleration: {
         type: 'f',
         value: 0
       },
       texture: {
         type: 't',
         value: render_target,
       },
     },
     vertexShader: glslify('../../glsl/sketch/distort/posteffect.vs'),
     fragmentShader: glslify('../../glsl/sketch/distort/posteffect.fs'),
   });
   return new THREE.Mesh(geometry, material);
 }
Example #17
0
 var createPlaneForRaymarching = function() {
   var geometry = new THREE.PlaneBufferGeometry(6.0, 6.0);
   var material = new THREE.ShaderMaterial({
     uniforms: {
       time: {
         type: 'f',
         value: 0
       },
       time2: {
         type: 'f',
         value: 0,
       },
       acceleration: {
         type: 'f',
         value: 0
       },
       resolution: {
         type: 'v2',
         value: new THREE.Vector2(window.innerWidth, window.innerHeight)
       }
     },
     vertexShader: glslify('../../glsl/sketch/metal_cube/object.vs'),
     fragmentShader: glslify('../../glsl/sketch/metal_cube/object.fs'),
     transparent: true
   });
   var mesh = new THREE.Mesh(geometry, material);
   mesh.name = 'MetalCube';
   return mesh;
 };
Example #18
0
function init() {

    _depth1 = fboHelper.createRenderTarget(1, 1, THREE.RGBAFormat, THREE.FloatType);

    _super.init.call(this, {
        uniforms: {
            u_distance: { type: 't', value: undef },
            u_dofDistance: { type: 'f', value: 0 },
            u_delta: { type: 'v2', value: new THREE.Vector2() },
            u_mouse: { type: 'v2', value: settings.mouse },
            u_amount: { type: 'f', value: 1 }
        },
        fragmentShader: glslify('./dof.frag')
    });

    _depth1Buffer = new Float32Array(4);
    _depth1Material = new THREE.RawShaderMaterial({
        uniforms: {
            u_distance: { type: 't', value: undef },
            u_mouse: { type: 'v2', value: settings.mouse }
        },
        transparent: true,
        blending: THREE.NoBlending,
        vertexShader: this.vertexShader,
        fragmentShader: fboHelper.rawShaderPrefix + glslify('./depth1.frag')
    });

}
Example #19
0
module.exports = function(app, cb) {
  cb = cb || noop

  const video = document.createElement('video')
  video.setAttribute('loop', true)
  video.setAttribute('muted', 'muted')
  addSource('video/mp4', 'assets/motion2.mp4')
  video.load()

  const texture = new THREE.Texture(video)
  texture.minFilter = THREE.LinearFilter
  texture.generateMipmaps = false
  const result = {
    video, texture
  }

  events.on(video, 'error', err => {
    cb(new Error(err))
    cb = noop
  })
  events.on(video, 'canplay', () => {
    texture.needsUpdate = true
    video.play()
    cb(null, result)
    cb = noop
  })

  function addSource(type, path) {
    var source = document.createElement('source')
    source.src = path
    source.type = type
    return video.appendChild(source)
  }

  app.on('tick', () => {
    if (video.readyState !== video.HAVE_ENOUGH_DATA)
      return
    texture.needsUpdate = true
  })

  const vert = glslify('./shaders/pass.vert')
  const frag = glslify('./shaders/debug.frag')

  const mat = new THREE.ShaderMaterial({
    uniforms: {
      iChannel0: { type: 't', value: texture }
    },
    vertexShader: vert,
    fragmentShader: frag,
    defines: {
      'USE_MAP': ''
    }
  })
  const geo = new THREE.BoxGeometry(1,1,1)
  const mesh = new THREE.Mesh(geo, mat)
  app.scene.add(mesh)

  return result
}
Example #20
0
 getLayerShader() {
   return {
     id: this.id,
     from: 'sources',
     vs: glslify('./vertex.glsl'),
     fs: glslify('./fragment.glsl')
   };
 }
Example #21
0
/**
 * @class
 * @extends PIXI.Shader
 * @memberof PIXI.mesh
 * @param gl {PIXI.Shader} The WebGL shader manager this shader works for.
 */
function TilingShader(gl)
{
    Shader.call(this,
        gl,
        glslify('./tilingSprite.vert'),
        glslify('./tilingSprite.frag')
    );
}
Example #22
0
function init(renderer, camera, scene) {

    _quadCamera = new THREE.Camera();
    _quadCamera.position.z = 1;
    _particlesScene = new THREE.Scene();
    _quadScene = new THREE.Scene();
    _camera = camera;
    _scene = scene;
    _renderer = renderer;
    _resolution = new THREE.Vector2();

    _initGeometry();
    _initDepthRenderTarget();
    _initAdditiveRenderTarget();
    _initBlurRenderTarget();

    _particles = new THREE.Points(_particleGeometry, _additiveRenderTarget.material);
    _particles.frustumCulled = false;

    var geomtry =  new THREE.PlaneBufferGeometry( 2, 2 );
    var uniforms = THREE.UniformsUtils.merge([THREE.UniformsLib.ambient, THREE.UniformsLib.lights]);
    uniforms.uDepth = {type: 't', value: _depthRenderTarget};
    uniforms.uAdditive = {type: 't', value: _additiveRenderTarget};
    uniforms.uResolution = {type: 'v2', value: _resolution};
    uniforms.uCameraInverse = {type: 'm4', value: _camera.matrixWorld};
    uniforms.uCameraRotationInverse = {type: 'm4', value: new THREE.Matrix4()};
    uniforms.uProjectMatrix = {type: 'm4', value: _camera.projectionMatrix};
    uniforms.uProjectMatrixInverse = {type: 'm4', value: new THREE.Matrix4()};
    uniforms.uFogColor = {type: 'c', value: new THREE.Color()};
    uniforms.uColor1 = {type: 'c', value: new THREE.Color()};
    uniforms.uColor2 = {type: 'c', value: new THREE.Color()};
    uniforms.uLightPosition = {type: 'v3', value: lights.mesh.position};

    _particlesMaterial = new THREE.ShaderMaterial({
        uniforms: uniforms,
        transparent: true,
        depthWrite: false,
        vertexShader: shaderParse(glslify('../glsl/particles.vert')),
        fragmentShader: shaderParse(glslify('../glsl/particles.frag'))
    });
    mesh = exports.mesh = new THREE.Mesh(geomtry, _particlesMaterial);
    _quadScene.add(mesh);

    _shadowMatrial = new THREE.ShaderMaterial( {
        uniforms: {
            uTexturePosition: {type: 't', value: null},
            uParticleSize: { type: 'f', value: 1 }
        },
        vertexShader: shaderParse(glslify('../glsl/shadow.vert')),
        fragmentShader: shaderParse(glslify('../glsl/shadow.frag')),
        blending: THREE.NoBlending,
        depthTest: true,
        depthWrite: true
    });
    _particles.castShadow = true;
    _particles.customDepthMaterial = _shadowMatrial;

}
 componentDidMount: function componentDidMount() {
   var gl = this._ctx = getContext('webgl', {canvas: this.getDOMNode()});
   this._shader = createShader(gl,
     glslify('./main.vertex.glsl'),
     glslify('./main.fragment.glsl'));
   this._shader.attributes.coordinate.location = 0;
   this._updateVAO();
   this._redraw();
 },
Example #24
0
export default function(app, assets) {
  const resolution = new THREE.Vector2(app.width, app.height)
  const mat = new THREE.ShaderMaterial({
    vertexShader: glslify('./shaders/horse.vert'),
    fragmentShader: glslify('./shaders/horse.frag'),
    uniforms: assign({}, THREE.UniformsLib.lights, {
      iResolution: { type: 'v2', value: resolution },
      iChannel0: { type: 't', value: assets.textures[0] },
      iChannel1: { type: 't', value: assets.textures[1] },
      iLookup: { type: 't', value: assets.lut },
      opacity: { type: 'f', value: 1 },
      morphTargetInfluences: { type: 'f', value: 0 },
      diffuse: { type: 'c', value: new THREE.Color(0xffffff) },
      iGlobalTime: { type: 'f', value: 0 },
    }),
    shading: THREE.FlatShading,
    lights: true,
    morphTargets: true,
    defines: {
      USE_MORPHTARGETS: '',
      USE_MAP: ''
    }
  })

  const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
  directionalLight.position.set(6, 10, -10);
  app.scene.add(directionalLight);

  app.scene.add(new THREE.HemisphereLight(0xecfbff, 0xb0ddff, 0.75))

  const mesh = new THREE.Mesh(assets.geometry, mat)
  mesh.scale.multiplyScalar(0.01)
  mesh.position.set(-0.1, -0.6, 0)
  // mesh.rotation.y = 140 * Math.PI/180
  mesh.rotation.y = 90 * Math.PI/180
  app.scene.add(mesh)

  const animation = new THREE.MorphAnimation(mesh)
  animation.play()
  let time = 0

  app.on('tick', (dt) => { 
    time += dt/1000
    mat.uniforms.iGlobalTime.value = time
    animation.update(dt)

    // rotate mesh?
    // let rotation = Math.sin(time) * 0.5 + 0.5
    // rotation = ease(rotation) * 2 - 1
    // rotation = rotation * Math.PI*0.5
    // mesh.rotation.y = Math.PI/2 + rotation*0.1
  })

  app.on('resize', ({ width, height}) => {
    resolution.set(width, height)
  })
}
Example #25
0
 createMesh() {
   return new THREE.Mesh(
     new THREE.PlaneBufferGeometry(2, 2),
     new THREE.RawShaderMaterial({
       uniforms: this.uniforms,
       vertexShader: glslify('../../glsl/postEffect.vs'),
       fragmentShader: glslify('../../glsl/postEffect.fs'),
     })
   );
 }
Example #26
0
shell.on("gl-init", function() {
	const gl = shell.gl

	const dim = f2.vec(shell.width, shell.height);

	rttHandle = rttDoubleBuffered.make(gl, dim, glslify('./demo.frag'), { float: true});
	initHandle = glRtt.create(gl, dim, glslify('./demo_fill.frag'), { float: true});
	initHandle.run(undefined, rttHandle.readBuffer);
	originalTexture = copyFboToTexture(rttHandle.readBuffer);
})
Example #27
0
  constructor() {
    this.triangle = this.createTriangle({
      vs: glslify('../../shader/1/vertex.glsl'),
      fs: glslify('../../shader/1/fragment.glsl')
    });

    this.mMatrix = mat4.create();
    this.mvpMatrix = mat4.create();
    this.renderType = [gl.TRIANGLES, gl.POINTS, gl.LINES, gl.LINE_STRIP, gl.LINE_LOOP];
  }
Example #28
0
    /**
     *
     */
    constructor()
    {
        super(
            // vertex shader
            glslify('../fragments/default.vert'),
            // fragment shader
            glslify('./noise.frag')
        );

        this.noise = 0.5;
    }
Example #29
0
 var createObject = function() {
   var geometry_base = new THREE.SphereBufferGeometry(2, 4, 4);
   var attr = geometry_base.attributes;
   var geometry = new THREE.BufferGeometry();
   var vertices_base = [];
   var radiuses_base = [];
   var radians_base = [];
   var scales_base = [];
   var indices_base = [];
   for (let i = 0; i < 16; i ++) {
     var radius = Util.getRandomInt(300, 1000);
     var radian = Util.getRadian(Util.getRandomInt(0, 3600) / 10);
     var scale = Util.getRandomInt(60, 120) / 100;
     for (var j = 0; j < attr.position.array.length; j += 3) {
       vertices_base.push(
         attr.position.array[j + 0],
         attr.position.array[j + 1],
         attr.position.array[j + 2]
       );
       radiuses_base.push(radius);
       radians_base.push(radian);
       scales_base.push(scale);
     }
     geometry_base.index.array.map((item) => {
       indices_base.push(item + i * attr.position.array.length / 3)
     });
   }
   var vertices = new Float32Array(vertices_base);
   geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
   var radius = new Float32Array(radiuses_base);
   geometry.addAttribute('radius', new THREE.BufferAttribute(radius, 1));
   var radians = new Float32Array(radians_base);
   geometry.addAttribute('radian', new THREE.BufferAttribute(radians, 1));
   var scales = new Float32Array(scales_base);
   geometry.addAttribute('scale', new THREE.BufferAttribute(scales, 1));
   var indices = new Uint32Array(indices_base);
   geometry.setIndex(new THREE.BufferAttribute(indices, 1));
   var material = new THREE.ShaderMaterial({
     uniforms: THREE.UniformsUtils.merge([
       THREE.UniformsLib['lights'],
       {
         time: {
           type: 'f',
           value: 0,
         },
       }
     ]),
     vertexShader: glslify('../../glsl/sketch/hole/object.vs'),
     fragmentShader: glslify('../../glsl/sketch/hole/object.fs'),
     shading: THREE.FlatShading,
     lights: true,
   });
   return new THREE.Mesh(geometry, material);
 };
Example #30
0
/**
 * @author Vico @vicocotea
 * original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/adjust/noise.js
 */

/**
 * A Noise effect filter.
 *
 * @class
 * @extends PIXI.Filter
 * @memberof PIXI.filters
 */
function NoiseFilter()
{
    core.Filter.call(this,
        // vertex shader
        glslify('../fragments/default.vert'),
        // fragment shader
        glslify('./noise.frag')
    );

    this.noise = 0.5;
}