Generative Design [2]

WebGL

  • Native API used to create 2D/3D in browser
  • Uses GPU (great performances)
  • Works with Javascript
  • Based on OpenGL (// Playstation 3)

WebGL

WebGL

WebGL

WebGL

WebGL

WebGL

WebGL

Augmented Reality

Virtual Reality

  • A scene (Scene)
  • Objects (Mesh)
  • Textures (e.g. MeshBasicMaterial)
  • Lights (e.g. DirectionalLight)
  • A camera (e.g. PerspectiveCamera)
  • A rendering engine (e.g. WebGLRenderer)
  • A medium (HTML5 canvas)

To create 3D we need :

Demo 1

Create a scene

Demo 2

Use other geometries

BoxGeometry
CircleGeometry
ConeGeometry
CylinderGeometry
DodecahedronGeometry
ExtrudeGeometry
IcosahedronGeometry
LatheGeometry
OctahedronGeometry

PlaneGeometry
RingGeometry
ShapeGeometry
SphereGeometry
TetrahedronGeometry
TextGeometry
TorusGeometry
TorusKnotGeometry
TubeGeometry

BufferGeometry = More performant but we loose straight access to the vertices.

Demo 3

Use another material

  • MeshBasicMaterial : No light interaction.
     
  • MeshStandardMaterial : Most realistic material interacting with lights.
     
  • MeshLambertMaterial : Good for non-shiny surfaces without reflection but interacting with lights.
     
  • MeshPhongMaterial : Same as Standard material but more performant thus may have less good results.

Demo 4

Add lights

  • AmbientLight : Global non directive light. Apply same light on every face.
     
  • DirectionalLight : Good to simulate sunlight. All rays have same angle.
     
  • HemisphereLight : Simulate a light coming from the 'sky' and one from the 'ground'.
     
  • PointLight : Simulate a light bulb with rays in 360°.
     
  • SpotLight : Same as Pixar's light.

Demo 5

Add control

OrbitControls

  • new THREE.TrackballControls(camera);
  • Needs to be updated with update();
  • Allows a 360° rotation

TrackballControls

  • new THREE.OrbitControls(camera);
  • Works with mouseMove / touchMove
  • Doesn't allow 360° rotation

Demo 6

Update on resize

Demo 7

Animate using GSAP

Exercice 1

Demo 8

Using textures

Exercice 2

360° simulation

Exercice 3

Particles animation

Exercice 4

User interaction (click/hover)

2 - Generative Design [2017-2018]

By Louis Hoebregts

2 - Generative Design [2017-2018]

  • 1,139
Loading comments...

More from Louis Hoebregts