Giter Club home page Giter Club logo

webglimagetransitions's Introduction

Creative WebGL Image Transitions

A set of interesting looking image transitions including distortion and warp effects made with WebGL.

Featured Image

Article on Codrops

Demo

Credits

License

This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used.

Misc

Follow Codrops: Twitter, Facebook, Google+, GitHub, Pinterest, Instagram

© Codrops 2019

webglimagetransitions's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

webglimagetransitions's Issues

black background with server

Hello I downloaded files and run on xampp localhost server. Images show up as blackscreen on slider, what should I do? I tried it on hostinger too - hpanel, same thing.

Question: Possible to use a 2D WebGL framework instead of threejs?

Would it be possible to adjust the vertex/fragment shaders of a demo, let's say demo5, so that they may work with a 2D framework like curtainsjs? I'm quite new to WebGL, so I attempted this and I've only gotten so far:

vertex shader:

precision mediump float;

attribute vec3 aVertexPosition;

uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;

varying vec2 vTextureCoord;

void main() {
  vTextureCoord = uv; // getting an error here saying uv is an undeclared identifier, is this a threejs variable?
  gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aVertexPosition, 1.0);
}

In the fragment shader there is a declaration: uniform vec4 resolution; is this using the default value: new THREE.Vector4()? I think curtainsjs only has Vec2 and Vec3 vector classes, will this be a problem? curtainsjs does have a Quaternion class though, do you think it's interchangeable with THREE.Vector4()?

More then 7 images in the slider

Dear @akella thanks so much for your amazing development.
I am trying to implement it to use 23 images as a background. Trying from html adding instances it works till 7 images but then it stuck if the array has 8 img like in the following line:

I can't find reference to data:image in the js code.
Did you use any limit for using images in folder?
Thanks so much!

Keeping the image ratio without cropping

I love what you've been doing here, thank you for making it public!

I'm wondering if there's a way to modify the code so the images keep their own aspect ratio while covering the screen either horizontally or vertically, depending on their ratio, but never cropping the image? Especially interested in doing that with Demo 5.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.