GitHub followers 3D visualization online tool.

... GitHub followers 3D visualization showing all GitHub users who have more than two followers, see on this website.

News : ThreeJS comes with new spotlight example.

New exameple with spotlight from ThreeJS, if you use the web development tool from browser then you can see the source code.

Tests for video rendering in its own reconstructed space.

This website will show you how to process a snowboard film in 3D space, from AlexandreDevaux twitter account.

ThreeJS : Use ThreeJS into my vercel project - 001.

New changes to the old project named nextjsthreejs001, created in vercel, I added the threejs library, created a scene with a default cube object.

ThreeJS : dissolve shader example.

This example with ThreeJS and shaders is created by Made with 🐪 by Faraz Shaikh, see more on the GitHub user.

News : Three.js new version r153 released.

You can see all change logs on the GitHub project.

Build a Mindblowing 3D Portfolio Website // Three.js Beginner’s Tutorial

The three.js library can be used very well to create good content in the website development area. You can see a good example from the Fireship youtube channel posted a year ago.

The threejs project by playdoh.

This is a beautiful website project named lagaleriedesespeces build with the Three.js library.

You can see it on this webpage.

Example with modified shader and threejs from the web.

I searched the web for an example with threejs and found an example created by someone else. I liked it and I modified it to look like this.

BVH and three.js meshes implementation.

This article is about the BVH implementation to speed up raycasting and enable spatial queries against three.js meshes.

The full source code can be found on this GitHub project.

You can see a good example on this demo page with this Tyrannosaurus rex

CodePen: Webcam with RGB color shader and the three.js javascript library.

Three.js is a cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser using WebGL.

This library is not really used in website development. It has some great real-time information display capabilities.

Today I show you a combined example of a webcam with a simple shader set with an RGBA color.

News : Three.js comes with new features.

I did not follow Three.js closely so this news is older.

Three.js is a cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser using WebGL. The source code is hosted in a repository on GitHub..., see https://en.wikipedia.org/wiki/Three.js

The last relese was 20 days agom see the GitHub webpage.

You can see a FBX model with animations on this online demo.

The ThreeNodes tool .

The ThreeNodes.js tool is a good example to see how the three.js libs can be used.
Is a good tool to create and use it, see online tool:

The infinitown from Little Workshop digital studio .

Today I show you a great webgl city from this WebGL experiment .
Is an a procedural city that feels alive.
Used a finite grid of random city blocks and using this tools: Three.js, Blender, Unity.
All models come from SimplePoly a team from Little Workshop.
This is a digital studio specialized in WebGL experiences.
This is a screenshot with this webgl experiment:

Another online editor for three.js projects.

The framework named three.js let you to create cameras, objects, lights, materials and more, and you have a choice of renderer.
The default editor of this framework can be found here.
Today I will introduce you a new editor that allows you to edit html online.
From my point of view, this new editor is a more versatile way of creating content with this framework.

You can load this new editor here, here is a screenshot:

Mandelbrot with three.js .

The Mandelbrot set is the set of complex numbers c for which the function f c ( z ) = z 2 + c . - 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.
You can read this tutorial here.

 <!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>