Download

<script src=//xem.github.io/microW/w.min.js></script>

How to use it

Camera, light and built-in shapes with plain colors

<script>
// WebGL 2 context
gl = canvas.getContext('webgl2');

// Scene description
scene = {

  // Background color (rgb)
  b: { c: [.5, .5, .5] },
  
  // Camera position and rotation
  c: {p: [3, -5, -10], r: [20, 10, 0]},
  
  // Diffuse light position and color
  d: {p: [.5, -.3, -.7], c: [1, 1, 1]},
  
  // Ambient light color
  a: {c: [0.3, 0.3, 0.2]},
  
  // Objects to render (model, size, position, rotation, color)
  o: [
    {m: "cube", s: [1, 1, 3], p: [-5, 0, 0], r: [0, 0, 0], c: [1, 0, 0]},
    {m: "cube", s: [2, 1, 1], p: [0, 0, 0], r: [0, 0, 0], c: [0, 1, 0]},
    {m: "cube", s: [1, 3, 1], p: [5, 0, 0], r: [0, 0, 0], c: [0, 0, 1]},
    {m: "plane", s: [2, 2], p: [0, 3, -5], r: [-45, -15, 45], c: [1, 1, 1]},
  ]
};

// Render 
ratio = 600/400;
W.render(scene, gl, ratio);

// To animate: update the scene object and call `render` 60 times per second !
</script>

Custom 3D models

<script>
// Custom shape: pyramid
pyramid = () => [
  // vertices: 
  [
    -.5,-.5, .5,   .5,-.5, .5,    0, .5,  0,  // Front
     .5,-.5, .5,   .5,-.5,-.5,    0, .5,  0,  // Right
     .5,-.5,-.5,  -.5,-.5,-.5,    0, .5,  0,  // Back
    -.5,-.5,-.5,  -.5,-.5, .5,    0, .5,  0,  // Left
     .5,-.5, .5,  -.5,-.5, .5,  -.5,-.5,-.5, // down
     .5,-.5, .5,  -.5,-.5,-.5,   .5,-.5,-.5
  ],
  
  // uv 
  [
    0, 0,   1, 0,  .5, 1,  // Front
    0, 0,   1, 0,  .5, 1,  // Right
    0, 0,   1, 0,  .5, 1,  // Back
    0, 0,   1, 0,  .5, 1,  // Left
    1, 1,   0, 1,   0, 0,  // down
    1, 1,   0, 0,   1, 0
  ]
];

// ...

scene = {

  // ...
  
  // objects to render
  o: [
    {m: "pyramid", s: [1.5, 1, 1.5], p: [0, 0, 0], r: [0, 30, 0], c: [.9, .6, .2]},
  ]
}
</script>

Texturing and transparency

<img src=tree.png id=tree>
<img src=brick.png id=brick>
<script>
// ...
scene = {

  // Objects to render
  o: [
    // Opaque objects first...
    {m: "cube", s: [1, 1, 1], p: [-.8, 0, 0], r: [0, 0, 0], t: brick},
    {m: "cube", s: [1, 1, 1], p: [-.8, 0, -7], r: [0, 0, 0], t: brick},
    
    // ... then objects with transparency ordered from back to front
    {m: "plane", s: [1, 1], p: [-2, 1, -2], r: [0, 0, 0], t: tree},
    {m: "plane", s: [1, 1], p: [.3, 2, 5], r: [0, 0, 0], t: tree},
  ]
};
</script>

2024 - xem