yomotsu/gl-slideshow

A JavaScript library for advanced 2D slideshow with WebGL, that provides variety of beautiful effects

gl-slideshow

An advanced 2D slideshow with WebGL, provides a variety of beautiful effects with GLSL power.

Shaders are forked from https://gl-transitions.com/

Working Examples

• Basic
• APIs
• Responsive
• Responsive-breakpoint
• Cover scale
• Custom shader
• Custom shader w/ additional texture

Usage

$ npm install --save GLSlideshow

then

import GLSlideshow from 'GLSlideshow';

Traditional way in web browser

Copy GLSlideshow.js from /dist/gl-slideshow.js and place it in your project. Then, Load the js file in your HTML

<script src="./path/to/gl-slideshow.js"></script>

Make a GLSlideshow instance

<canvas id="myCanvas"></canvas>

<script>
const slideshow = new GLSlideshow(
	[ './img/1.jpg', './img/2.jpg', './img/3.jpg', './img/4.jpg' ],
	{
		canvas: document.getElementById( 'myCanvas' ), // optional
		width: 1024,        // optional
		height: 576,        // optional
		duration: 1000,     // optional
		interval: 5000,     // optional
		effect: 'crossZoom' // optional
	}
);
</script>

Constructor and Options

new GLSlideshow( images, options );

images (required)

An array consists of HTMLImageElements or strings for path to image.
Images must be hosted on the same domain or arrowed CORS.

Options

key	type	value
canvas	HTMLCanvasElement	The canvas element
width	number	width in pixels
height	number	height in pixels
imageAspect	number	aspect ratio of the image (assume all images are the same aspect ratio)
duration	number	duration time in milliseconds
interval	number	interval time in milliseconds
effect	string	name of effect *1

*1 Effect option currently takes following strings

• 'crossFade'
• 'crossZoom'
• 'directionalWipe'
• 'wind'
• 'ripple'
• 'pageCurl'

APIs

After you made an instance, you can control using the following methods.
For more detail, see APIs example

• instance.pause()
• instance.play()
• instance.setSize( width, height )
• instance.insert( image, order )
• instance.remove( order )
• instance.replace( images )
• instance.to( to )
• instance.setEffect( effectName [, uniforms ] )
• instance.destroy()

Editable params

• instance.duration
• instance.interval

Read only params

• instance.domElement
• instance.inTransition
• instance.length
• instance.currentIndex
• instance.prevIndex
• instance.nextIndex

Events

• instance.addEventListener( 'transitionStart', () => { /* callback */ } );
• instance.addEventListener( 'transitionEnd', () => { /* callback */ } );

Static methods

• GLSlideshow.addShader( 'shaderName', shaderSource, uniforms )

gl-slideshow's Issues

Adding new GLSL transitions

I am trying to add a new GLSL transition from https://gl-transitions.com/ and the format does not seem to match up. I'm rather new to GLSL in general so I am not sure what would need to happen to convert the format there to work with this package or how to fork this & make it work with their new formatting.

Any help would be appreciated.

Video playback and more

Hi!

I forked your awesome library and started adding some features. This is the first time I'm working with WebGL so its probably not the best code but it works :D

Stuff that I got working is:

• Video playback
• Automatic ratio handling for video and images in crossZoom transition (have only altered that one yet)
• Start slideshow without images (it only shows transparent pixels then)
• Transition in to empty slide (by calling transition(-1))

My code is not great, its more of an experiment. But maybe you can have some use for it?

Anyway... Great work with your library and it have been fun to start playing around with WebGL.

// stamp

Programmatically set progress?

Hi, thanks a lot for this great library, I was wondering if it's possible to set the transition progress programmatically.. in case of a touch swipe, or hover before/after effect like this one:

GLSlideshow_progress.mp4

Shader example

Hi!
I'm trying to make my own transition effect.
So I checked out the shader.html
I noticed it makes no difference what value I write in the variabel 'uniforms' for the smoothness.
It always has sharp edges.

const uniforms = {
	smoothness: { value: 1,  type: 'float' }
};

So I went to https://gl-transitions.com/editor/ and pasted in the code there.
In the editor it works as expected with smooth edges.

Am I doing something wrong?

Really like the slider by the way.
Good job!

Best, Niklas

TODO

• fallback with canvas2d (only crossfade, for IE9 and so)
• glDisable(GL_STENCIL_TEST); glDisable(GL_DEPTH_TEST); glDisable(GL_CULL_FACE); glDisable(GL_LIGHTING);
• documentation

Feature Request: Ability to scroll through images.

Hello. Every time I press a key, the screensaver ends. Is it possible to scroll through images using the keyboard? Also, would it be possible to be able to pause the slideshow by pressing the P button or open a directory path for an image by pressing E? The reason I ask is because I'm used to running Random Photo Screensaver on Windows which has these features. Thanks.

Adding different effects to each Image

I am new to gl-transitions.May I know how to add different effects to each image like cross fade for 1st image,directional wipe for second and so on .Thank You

Using video clips

I have been trying to get video to load into the canvas along with images. I almost have it, while the video frame displays i am not getting all frames to draw. I have triggered the video object to play and was trying a redraw in tick but it only plays video frames during the transition and then stops.

I bet i could figure it out with more time but i am kind of in a crunch to show some progress. Any pointers on what could be done to achieve videos playing and transitioning with images?

Add Support For HTML Element Transitions

Your library is the best! It has amazing potential.
I'd like to request for a feature that allows transitions for any HTML element including text, divs e.t.c.

Is this something that can be done currently and I just haven't discovered? Or is it something that would require building?

How to use responsive images for slide show

Hy there

Thanks for this easy to use gl-slider and it's amazing. The problem is how I can use responsive images in these slideshows depending on the screen size.

Regards
Shehzad Asif
Front End Web Developer

My own "displacementMap" Image

Hello,

I use the slideshow with this transition (and it works): https://gl-transitions.com/editor/displacement

But how can I create my own "displacementMap" image for this transition

like this:
texture: 'images/displacement-image.png'

My goal is a slideshow like this: https://tympanus.net/Development/webGLImageTransitions/index6.html

Be happy about any answer

Please help me capturing

Hi @yomotsu,

Thanks for the lib.

Now I want to capture the slide show and save to webm (using MediaRecorder).
I've tried and could capture result, but the quality is not as expected.

Here's the code (copy from basic.html)

basic2.zip

Please help me.

Thank you,
Duong Nguyen