webgl-three-library

✨ WEBGL LIBRARY ✨

---

The purpose of this library is to be able to simply reuse effects created in webgl. This library is based on the amazing Threejs library

• Installation
• Project structure
• How to use it ?
• The uniforms
• The effects

Installation

npm install webgl-three-library

Project structure

• src
  • Utils
    • Time.js
    • Size.js
    • MouseTracking.js
    • index.js
    • DOMImages.js
    • Ressources.js
    • Scroll.js
  • effects
    • Effect
      • shaders
        • fragment.glsl
        • vertex.glsl
      • effect.js
    • ...
    • Camera.js
    • Experience.js
    • Renderer.js

How to use it ?

1. Instanciate main class

Create <canvas class="webgl"></canvas> on your html. Instantiate the Experience class which gathers all the classes of the library.

new Experience(document.querySelector('canvas.webgl'), { parameters });

It takes different parameters :

Parameter	Value		Description
activeOrbitControls	bool	required	Active Three.js OrbitControls
planeOptions.widthSegments	number	required	Refer to threejs documentation
planeOptions.heightSegments	number	required	Refer to threejs documentation
uniformsOptions	object	not required	For add uniforms. Refer to threejs documentation
shaderOptions.vertexShader	vertex.glsl	required	Can import the vertex shader from effects folder
shaderOptions.fragmentShader	fragment.glsl	required	Can import the fragment shader from effects folder
cameraOptions.fov	number	required	Refer to threejs documentation
cameraOptions.instance.x	number	not required	Refer to threejs documentation
cameraOptions.instance.y	number	not required	Refer to threejs documentation
cameraOptions.instance.z	number	not required	Refer to threejs documentation
cameraOptions.lookat	Threejs instance	not required	Refer to threejs documentation. By default can put new THREE.Vector3()
rendererOptions	object	not required	Refer to threejs documentation.
actions.onEnter	func	required	Function executed when the mouse enter the planes. The intersect parameter allows to access the intersected plane
actions.onLeave	func	required	Function executed when the mouse leave the planes. The intersect parameter allows to access the intersected plane
actions.onMove	func	required	Function executed when the mouse moves on the window
actions.onScroll	func	required	Function executed on scroll
loaderState.startLoader	func	required	Function executed on html images start loading
loaderState.stopLoader	func	required	Function executed on html images finish loading

2. Insert images

Create ./static folder for all images

The uniforms

uMouse: {
  value: this.mousePosition // get mouse coordinates in 3D renderer (x, y)
},
uTime: {
  value: 0.0 // get time
},
uHover: {
  value: new THREE.Vector2(0.5, 0.5) // get hover centered position
},
uHoverState: {
  value: 1.0 // 1 if is not hovered and 0 if is hovered
}

The effects

How to implement effect ?

To use each effect, use fragments shader and vertex shader from the effects/effect.js :

import { shadersOptions } from '../src/Experience/effects/wavesEffect/wavesEffect';

shaderOptions: {
  vertexShader: shadersOptions.vertex,
  fragmentShader: shadersOptions.fragment,
}

To recreate effect can retrieve in demo library, this is the default options and functions :

Effects default setup

Waves & interaction effect

Default animation :

// plane options
planeOptions: {
  widthSegments: 8,
  heightSegments: 8,
},

// camera otpions
cameraOptions: {
  fov: 70,
  instance: {
    x: 1,
    y: 1,
    z: 600,
  },
  lookAt: new THREE.Vector3(),
},

// actions
function onEnter(intersect) {
  intersect.object.material.uniforms.uHover.value = intersect.uv;
  intersect.object.material.uniformsNeedUpdate = true;
}

function onLeave(intersect) {
  intersect.object.material.uniforms.uTime.value = 0.0;
  intersect.object.material.uniformsNeedUpdate = true;
}

function onTimeRunning() {
  experience.DOMImages.imageParameters;
  if(experience.DOMImages.imageParameters) {
    experience.DOMImages.imageParameters.forEach(imageParameter => {
      imageParameter.mesh.material.uniforms.uTime.value = experience.time.elapsed * 0.002;
    });
  }
}

Ripple rgb effect

Default animation :

// plane options
planeOptions: {
  widthSegments: 16,
  heightSegments: 16,
}

// camera options
cameraOptions: {
  fov: 70,
  instance: {
    x: 1,
    y: 1,
    z: 600,
  },
  lookAt: new THREE.Vector3(),
}

// actions
function onEnter(intersect) {
  intersect.object.material.uniforms.uHover.value = intersect.uv;
  intersect.object.material.uniforms.uTime.value = experience.time.elapsed * 0.001;
  intersect.object.material.uniformsNeedUpdate = true;
}

function onLeave(intersect) {
  intersect.object.material.uniforms.uTime.value = 0.0;
  intersect.object.material.uniformsNeedUpdate = true;
}