Tag Archives: WebGL

A simple sphere with Three.js .

19/05/2017 by admin · Leave a comment

This tutorial is about how to add a simple wireframe sphere into your webpage using the a javascript 3D library named three.js .
This 3D library and some demo and examples can be found here.
The tutorial for today is let you to know how to deal with a simple object.
First you need to make a folder named project.
Into this folder create two folder named js and css.
Into the project create a index.html file and add this content:

Haskell
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Three.js Start</title>
      <link rel="stylesheet" href="css/style.css">
</head>
 
<body>
 
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js'></script>
 
    <script src="js/index.js"></script>
 
</body>
</html>

Make a file named style.css into css folder and add this:

CSS
1
2
3
4
canvas {
  background-color: white;
  position: relative;
}

This wi
Into js folder create a file named index.js and add this source code:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1,1000);
 
var renderer = new THREE.WebGLRenderer();
renderer.setSize (window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
var geometry = new THREE.SphereGeometry(9, 12, 12);
var material = new THREE.MeshBasicMaterial ({color: 0x0011ff});
var sphere = new THREE.Mesh(geometry, wireframe);
var wireframe = new THREE.WireframeGeometry( geometry );
 
var line = new THREE.LineSegments( wireframe );
line.material.depthTest = false;
//line.material.opacity = 0.25;
line.material.transparent = false;
 
scene.add( line );
 
camera.position.z= 35;
//camera.position.x= 10;
 
function render(){
  requestAnimationFrame (render);
 
  line.rotation.x += 0.01;
line.rotation.y -= 0.01;
  //line.rotation.z -= 0.01;
  sphere.rotation.x += 0.02;
sphere.rotation.y += 0.02;
  renderer.render (scene, camera);
}
render();

This java script file follow some steps to make the wireframe sphere:

  • make the scene;
  • set the camera;
  • create the renderer space;
  • add the renderer space to HTML document;
  • create sphere
  • add one material ;
  • make a wireframe from geometry variable;
  • create wireframe object;
  • create a line like wireframe object;
  • deal with line material;
  • add line to the scene;
  • set the position of camera;
  • create the render function to animate the content;
  • run all with render function.

The result is something like this:

Some changes can be used into this example to see how is working.
You can remove the css folder and style file but you need to remove this line from index.html file:

Haskell
1
<link rel="stylesheet" href="css/style.css">

The sphere variable can be added into java script source code:

JavaScript
1
2
3
//scene.add( line );
scene.add( sphere );
camera.position.z= 35;

This will make some change into the render canvas.

Posted in All, HTML 5, javascript, Programming, web, WebGL. Tagged with , , , , , , .

Mandelbrot with three.js .

20/09/2016 by admin · Leave a comment

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 ) {\displaystyle f_{c}(0)} {\displaystyle f_{c}(0)}, f c ( f c ( 0 ) ) {\displaystyle f_{c}(f_{c}(0))} {\displaystyle f_{c}(f_{c}(0))}, etc., remains bounded in absolute value. – wikipedia.org

You need to download the three.js – java script from threejs webpage.
The source code is simple. Come with default HTML5 page and javascripts.
One part of this will make vertex-shader and fragment shader, both is 2D shader type.
You need the canvas tag with id=”canv”.
The last part of source code is make to put all into one image processing by shaders.

Mandelbrot 001
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<script src="three.js"></script>
</head>
<body>
 
<canvas id="canv" width="640" height="480"></canvas>
 
<script id="2d-vertex-shader" type="x-shader/x-vertex">
attribute vec2 a_position;
  void main() {
    gl_Position = vec4(a_position, 0, 1);
  }
</script>
 
<script id="2d-fragment-shader" type="x-shader/x-fragment">
  #ifdef GL_FRAGMENT_PRECISION_HIGH
    precision highp float;
  #else
    precision mediump float;
  #endif
  #define PI 3.14159
 
float hash( float n ) { return fract(sin(n)*753.5453123); }
 
#define NUM_STEPS   50
  #define ZOOM_FACTOR 2.0
  #define X_OFFSET    0.5
 
  #ifdef GL_FRAGMENT_PRECISION_HIGH
    precision highp float;
  #else
    precision mediump float;
  #endif
  precision mediump int;
 
  void main() {
    vec2 z;
    float x,y;
    int steps;
    float normalizedX = (gl_FragCoord.x - 320.0) / 640.0 * ZOOM_FACTOR *
                        (640.0 / 480.0) - X_OFFSET;
    float normalizedY = (gl_FragCoord.y - 240.0) / 480.0 * ZOOM_FACTOR;
 
    z.x = normalizedX;
    z.y = normalizedY;
 
    for (int i=0;i<NUM_STEPS;i++) {
 
    steps = i;
 
        x = (z.x * z.x - z.y * z.y) + normalizedX;
        y = (z.y * z.x + z.x * z.y) + normalizedY;
 
        if((x * x + y * y) > 4.0) {
          break;
        }
 
        z.x = x;
        z.y = y;
 
    }
 
    if (steps == NUM_STEPS-1) {
      gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    } else {
      gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
    }
  }
</script>
<script type="text/javascript">
var gl;
var canvas;
var buffer;
  window.onload = init;
  function init() {
 
    canvas        = document.getElementById('canv');
    gl            = canvas.getContext('experimental-webgl');
    canvas.width  = 640;
    canvas.height = 480;
    gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
 
var shaderScript;
var shaderSource;
var vertexShader;
var fragmentShader;
 
buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.bufferData(
    gl.ARRAY_BUFFER,
    new Float32Array([
      -1.0, -1.0,
       1.0, -1.0,
      -1.0,  1.0,
      -1.0,  1.0,
       1.0, -1.0,
       1.0,  1.0]),
    gl.STATIC_DRAW
  );
 
    render();
  }
function render() {
    window.requestAnimationFrame(render, canvas);
    gl.clearColor(1.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
 
  shaderScript = document.getElementById("2d-vertex-shader");
  shaderSource = shaderScript.text;
  vertexShader = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vertexShader, shaderSource);
  gl.compileShader(vertexShader);
 
  shaderScript   = document.getElementById("2d-fragment-shader");
  shaderSource   = shaderScript.text;
  fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fragmentShader, shaderSource);
  gl.compileShader(fragmentShader);
 
  program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);  
  gl.useProgram(program);
  positionLocation = gl.getAttribLocation(program, "a_position");
  gl.enableVertexAttribArray(positionLocation);
  gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
 
  gl.drawArrays(gl.TRIANGLES, 0, 6);
  }
</script>
</body>
</html>

Posted in All, HTML 5, javascript, Programming, WebGL, Windows 10. Tagged with , , , , , , , , .

Shader x-ray effect with Three.js .

15/06/2016 by admin · Leave a comment

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 from OBJLoader.js.

Then all steps come to show this object using shaders.

<!DOCTYPE html>
<html>

<head>
<title>shaders x-ray effect</title>
<script src=”three.min.js”></script>
<script src=”OBJLoader.js”></script>
<script src=”ColladaLoader.js”></script>

<script id=”vertexShader” type=”x-shader/x-vertex”>
uniform float p;
varying float intensity;
void main()
{
vec3 vNormal = normalize( normalMatrix * normal );
intensity = pow(1.0 – abs(dot(vNormal, vec3(0, 0, 1))), p);
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>

<script id=”fragmentShader” type=”x-shader/x-vertex”>
uniform vec3 glowColor;
varying float intensity;
void main()
{
vec3 glow = glowColor * intensity;
gl_FragColor = vec4( glow, 1.0 );
}
</script>
<style>
html, body {
height: 100%;
margin: 0;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script>
window.addEventListener(‘load’, function () {
var human;

var $ = document.querySelector.bind(document);

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, 1, 0.1, 30);
var renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});

renderer.setClearColor(0x000000, 1.0);

lookAt = scene.position;
lookAt.y = 10;
camera.lookAt(lookAt);

document.body.appendChild(renderer.domElement);

var customMaterial = new THREE.ShaderMaterial({
uniforms: {
p: { type: “f”, value: 3 },
glowColor: { type: “c”, value: new THREE.Color(0x84ccff) },
},
vertexShader: $(‘#vertexShader’).text,
fragmentShader: $(‘#fragmentShader’).text,
side: THREE.DoubleSide,
blending: THREE.AdditiveBlending,
transparent: true,
depthWrite: false
});

var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load(‘cube2.dae’, function (collada) {
dae = collada.scene;

dae.traverse( function ( child ) {

if (child instanceof THREE.Mesh) {
child.material = customMaterial;
}

} );

dae.position.y = 0;
dae.scale.x = 1;
dae.scale.y = 1;
dae.scale.z = 1;
human = dae;
scene.add(human);
});

function resize() {
var canvas = renderer.domElement;
var width  = canvas.clientWidth;
var height = canvas.clientHeight;
if (canvas.width !== width || canvas.height !== height) {
renderer.setSize(width, height, false);
camera.aspect = width / height;
camera.updateProjectionMatrix();
}
}

function render(time) {
time *= 0.001;

resize();

camera.position.x = -20 * (Math.cos(time));
camera.position.z = (20 * (Math.sin(time)));
camera.position.y = 20;

camera.lookAt(lookAt);

renderer.render(scene, camera);
requestAnimationFrame(render);
}
requestAnimationFrame(render);

});
</script>
</body>

</html>

The result is this:
x-ray_effect

Posted in All, HTML 5, javascript, Programming, web, WebGL. Tagged with , , , , , , .

WebGL – sound visualizer with Three.js .

16/05/2016 by admin · Leave a comment

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 this functions:init, animate, onError.
To used the audio file you need to have this functions: Play and Load.
The visualizer is make with NewLine function.
This function make one material with one line with green color: 0x00ff00.
If you take a look to the source code will see is simple.
… and result is this:
sounds
see the source code:
<!doctype html>
<html>
<head>
<script src=”js/three.min.js”></script>
</head>
<body>
<script>

var scene, camera, renderer, line;
var geometry, material, mesh, array;

function init() {

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1000;

renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );

document.body.appendChild( renderer.domElement );

}

function NewLine() {

scene.remove(line);

var material = new THREE.LineBasicMaterial({
color: 0x00ff00
});

var geometry = new THREE.Geometry();

array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(array)

var Ypoints = array;
var xPoint = -2048;
for(var i=0;i<Ypoints.length;i++) {
geometry.vertices.push( new THREE.Vector3( xPoint, Ypoints[i], 0 ) );
xPoint = xPoint + 4;
}

line = new THREE.Line( geometry, material );
scene.add( line );
}

function animate() {

requestAnimationFrame( animate );
NewLine();
renderer.render( scene, camera );

}

window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();

function Play(buffer) {
var source = context.createBufferSource();
source.buffer = buffer;
source.connect(context.destination);

analyser = context.createAnalyser();
source.connect(analyser);
analyser.connect(context.destination);

source.start(0);

init();
animate();
}

function Load(url) {
var request = new XMLHttpRequest();
request.open(‘GET’, url, true);
request.responseType = ‘arraybuffer’;

request.onload = function() {
context.decodeAudioData(request.response, function(buffer) {
Play(buffer)

}, onError);
}
request.send();

function onError() {
console.log(‘error’)
}
}
Load(‘your_sound_file.mp3’);
</script>
</body>
</html>

Posted in All, HTML 5, javascript, Programming, web, WebGL. Tagged with , , , , , , .

WebGL – simple shader example.

12/05/2016 by admin · Leave a comment

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 java script with one var named buffer.
The buffer var is used for one array. The Float32Array typed array represents an array of 32-bit floating point numbers.
This var come with this source code into init function.

buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array([
-1.0, -1.0,
1.0, -1.0,
-1.0,  1.0,
-1.0,  1.0,
1.0, -1.0,
1.0,  1.0]),
gl.STATIC_DRAW
);
We can see also we have two functions: init and render and this:

var gl;
var canvas;
var buffer;

window.onload = init;
I put also two default shaders for vertex and fragment.
I use some vars for this into init function:

var shaderScript;
var shaderSource;
var vertexShader;
var fragmentShader;

This is the script:

<!DOCTYPE html>
<head>
<title>WebGL – Hello World!</title>
</head>
<body>
<script type=”text/javascript”>
var gl;
var canvas;
var buffer;

window.onload = init;

function init() {
var shaderScript;
var shaderSource;
var vertexShader;
var fragmentShader;

canvas        = document.getElementById(‘glscreen’);
gl            = canvas.getContext(‘experimental-webgl’);
canvas.width  = 640;
canvas.height = 480;

gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array([
-1.0, -1.0,
1.0, -1.0,
-1.0,  1.0,
-1.0,  1.0,
1.0, -1.0,
1.0,  1.0]),
gl.STATIC_DRAW
);

render();

}

function render() {

window.requestAnimationFrame(render, canvas);

shaderScript = document.getElementById(“2d-vertex-shader”);
shaderSource = shaderScript.text;
vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, shaderSource);
gl.compileShader(vertexShader);

shaderScript   = document.getElementById(“2d-fragment-shader”);
shaderSource   = shaderScript.text;
fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, shaderSource);
gl.compileShader(fragmentShader);

program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

positionLocation = gl.getAttribLocation(program, “local_position”);
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLES, 0, 6);
}
</script>
<script id=”2d-vertex-shader” type=”x-shader/x-vertex”>
attribute vec2 local_position;
void main() {
gl_Position = vec4(local_position, 0, 1);
}
</script>
<script id=”2d-fragment-shader” type=”x-shader/x-fragment”>
void main() {
gl_FragColor = vec4(gl_FragCoord.x / 640.0, gl_FragCoord.y / 480.0, 0, 1);
}
</script>
<canvas id=”glscreen”></canvas>
</body>
</html>
The result is this:

shader001

Posted in 3D, All, HTML 5, javascript, Programming, WebGL. Tagged with , , , , .
12next →