Category Archives: HTML 5

Mandelbrot 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 ) {\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

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.

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

WebRTC – First steps – part 001.

The official website tells us:
WebRTC is a free, open project that provides browsers and mobile applications with Real-Time Communications (RTC) capabilities via simple APIs. The WebRTC components have been optimized to best serve this purpose.
First I will come with one simple example into this tutorial.
Will make one webcam into webpage.
Make one index.html file and add this source code:
Continue reading

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

Simple radial background.

This is the most simple example with HTML5. The result is one radial effect background blue.
I add some text with style color white over this background.
You can start with one default HTML5 and add the style of body tag.
First create one file and named my_test.html. Then you can add this source code:
<!DOCTYPE html>
<meta charset=”UTF-8″>
<title>Title of the document</title>
<style type=”text/css”>

background:radial-gradient(#4777B0 0%,#201D31  100%);
<p style=’color:white’> – some text over background!</p>

Posted in All, HTML 5, web. Tagged with , , , , .

Simple button shadow with css and webkit filter.

If you like it this simple shadow text with css with webkit filter then today I will show you how to make one simple shadow button.
Is a basic html5 with css style and show with class button.
<!DOCTYPE html>
color: #555;
text-shadow: 0px 1px 0px #fff;
display:block; padding: 5px;
text-decoration:none;text-align: center;
font-size: 14px;
font-weight: bold;
border: 1px solid #888;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

background-image: -webkit-gradient(
left bottom,
left top,
color-stop(0, rgb(194,194,195)),
color-stop(0.8, rgb(200,200,200)),
color-stop(1, rgb(250,250,250))

background-image: -moz-linear-gradient(
center bottom,
rgb(194,194,195) 0%,
rgb(200,200,200) 80%,
rgb(250,250,250) 100%
box-shadow: 0px 0px 20px #30ff00;
-moz-box-shadow: 0px 0px 20px #30ff00;
-webkit-box-shadow: 0px 0px 20px #30ff00;
<meta charset=”UTF-8″>
<title>shadow button</title>

<p><a href=”” class=”button”>Shadow buttton effect</a></p>


shadow button

Shadow buttton effect

Posted in All, HTML 5, web. Tagged with , , .

Shader x-ray effect 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 from OBJLoader.js.

Then all steps come to show this object using shaders.

<!DOCTYPE html>

<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 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 );
html, body {
height: 100%;
margin: 0;
overflow: hidden;
canvas {
width: 100%;
height: 100%;
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;


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;

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;

function render(time) {
time *= 0.001;


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


renderer.render(scene, camera);



The result is this:

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