WebGLTag Archive

WebGL

This example tutorial shows how to add a text to canvas WebGL. In my example, I used the click refresh touchdown text. The rest of the source code is very simple. The HTML comes with the tag canvas, and the CSS area is filled with a simple background. The javascript… Continue Reading WebGL – refresh touchdown text 001.

This tutorial is about how to add a simple wireframe sphere into your webpage using the javascript 3D library named three.js. This 3D library and some demo and examples can be found here. The tutorial for today is to let you know how to deal with a simple object. First, you… Continue Reading A simple sphere with Three.js .

The Mandelbrot set is the set of complex numbers c for which the function f c ( z ) = z 2 + c {\displaystyle f_{c}(z)=z^{2}+c} {\displaystyle f_{c}(z)=z^{2}+c} does not diverge when iterated from z = 0 {\displaystyle z=0} z=0, i.e., for which the sequence f c ( 0 )… Continue Reading Mandelbrot with three.js .

This source code running with Three.js javascript library. I used just three.min.js, OBJLoader.js and ColladaLoader.js to make the x-ray effect. I load one 3d object and using vertex and fragment shaders I rendered it. The object is a castle and is named: cube2.dae. This object is loaded with load function… Continue Reading Shader x-ray effect with Three.js .

First, you need to create one html5 default webpage. Also, you need to add the three.js library to your file. Add your MP3 file to your folder project. I named my mp3 file with your_sound_file.mp3. Because you used three.js javascript file you need to have these functions: init, animate, onError.… Continue Reading WebGL – sound visualizer with Three.js .

This is a simple WebGL shader example. I used a simple HTML5 example with one canvas. The canvas has named glscreen. The next step is to put one javascript with one var named buffer. The buffer var is used for one array. The Float32Array typed array represents an array of… Continue Reading WebGL – simple shader example.

This is the result of my example: WebGL test sound. And this it’s the source code : <!DOCTYPE html> <html lang=”en”> <head> <title>three.js misc – sound</title> <meta charset=”utf-8″> <meta name=”viewport” content=”width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0″> <style> body { background-color: #000000; margin: 0px; overflow: hidden; font-family:Monospace; font-size:13px; text-align:center; font-weight: bold; text-align:center; }… Continue Reading WebGL – sound test example with Three.js .

This website named jsFiddle it’s a great web tool. You can allow you to test your javascript scripts, CSS, HTML … over the internet. The site is made by Piotr Zalewa. One great article about Piotr Zalewa can be found here. You can read the documentation for jsFiddle. What I… Continue Reading Introduction about online jsFiddle website .