JavaScript Library to Create 3D Interactions & Animations
An Open Source JavaScript API that allows to convert HTML DOM elements into the interactive textured plane. You can easily Manage WebGL & positioning your meshes relative to the DOM elements of your web page.
What is Curtains.js?
Have you heard of curtains.js? It’s a nifty JavaScript library that’s open source and lightweight. With this tool, developers like you can turn your plain HTML elements into cool interactive textured planes. Even though it’s small, this library is super reliable, making it a breeze for you to craft awesome 3D effects and animations. You can smoothly convert your HTML elements that have images and videos into 3D WebGL textured planes and then jazz them up with shaders. The library comes with the MIT license, allowing you to use it freely for personal and business ventures.
The library is user-friendly, but it’s important to have a solid understanding of HTML, CSS, JavaScript, and shaders. Shaders are instructions that guide the computer in rendering pixels in the graphics pipeline. You should also be familiar with vertex and fragment shaders, how to utilize uniforms, and the basics of GLSL syntax. The main aim of the library is to provide an easy way for handling WebGL and positioning your meshes relative to the DOM elements of your web page. WebGL is a JavaScript API for real-time rendering of 3D and 2D graphics within a browser.
Getting Started with Zen-3d
The easiest way to install curtains.js is using npm. Please use the following command for a smooth installation.
Install curtains.js via NPM
npm i curtainsjs
Manage 3D Scenes using JavaScript
The open source library curtains.js has included useful functionality related to scenes management and its relevant properties. The Scene will pile all the objects that will be drawn including planes and shader passes in different arrays, and call them in the right order to be drawn. You can easily reset the plane stacks, clear the place stack, rebuild it with the new place indexes, add new planes to a scene, remove a plane from a scene, changing the position of a plane, and so on. The following example demonstrates how to create a WebGL scene with interactive elements inside JavaScript applications.
How to Create a WebGL Scene with Interactive Elements via JavaScript API?
// Initialize Curtains.js
const curtains = new Curtains({
container: "curtains-canvas", // ID of the canvas element
pixelRatio: Math.min(1.5, window.devicePixelRatio) // Adjust pixel ratio for better performance
});
// Create a plane
const plane = new Curtains.Plane(curtains, {
widthSegments: 20, // Number of segments along the width
heightSegments: 20, // Number of segments along the height
uniforms: {
// Add custom uniforms for shaders
time: {
name: "time",
type: "1f",
value: 0
}
},
// Vertex shader code
vertexShader: `
precision mediump float;
attribute vec3 aVertexPosition;
attribute vec2 aTextureCoord;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
uniform float time;
varying vec2 vTextureCoord;
void main() {
vec3 pos = aVertexPosition;
// Manipulate vertex position based on time
pos.z += sin(pos.x * 0.1 + time) * 0.1;
gl_Position = uPMatrix * uMVMatrix * vec4(pos, 1.0);
vTextureCoord = aTextureCoord;
}
`,
// Fragment shader code
fragmentShader: `
precision mediump float;
varying vec2 vTextureCoord;
uniform sampler2D uSampler;
void main() {
gl_FragColor = texture2D(uSampler, vTextureCoord);
}
`
});
// Handle window resize event
window.addEventListener("resize", function () {
curtains.resize();
});
// Update shaders with time uniform
curtains.onRender(() => {
plane.uniforms.time.value += 0.01;
});
Handling Renders Properties via JS
The free library curtains.js provides the capability for handling renders inside your own application with ease. The Renderer class handling has provided several important functionalities related to the WebGL context such as creation and restoration, extensions, WebGL commands, and more. It can be used to generate a container, append a canvas, handle WebGL extensions, context lost/restoration events, and create a Scene class object that will keep track of all added objects. Apart from the above it also supports handling global WebGL commands, such as scene clearance, frame buffers binding, setting depth, blend func, and so on.
Animate Images and Videos via JavaScript
The open source library curtains.js gives software developers the power to animate images and videos inside their own applications with ease. The library enables developers to create planes containing images and videos that act like plain HTML elements, with position and size defined by CSS rules. You can also use multiple textures, multiple planes, multiple planes canvas text, multiple video texture, and many more. The following example demonstrates how to Animate Images inside JavaScript applications.
How to Animate Images via JavaScript API?
const curtains = new Curtains({
container: "curtains-canvas"
});
// Use Curtains.js to create a plane with the image as its texture.
const plane = new Curtains.Plane(curtains, {
vertexShader: `
// Vertex shader code here
`,
fragmentShader: `
// Fragment shader code here
`,
texturesOptions: {
sampler: "imageTexture" // specify sampler for the image texture
}
});
// Load the image texture
plane.loadTexture("path/to/image.jpg");
// Utilize shaders to animate the image
// Update shaders with time uniform for animation
curtains.onRender(() => {
plane.uniforms.time.value += 0.01;
});