kaosat-dev/esnextbin.md

## esnextbin.md

      
    Raw
  

              esnextbin.md
            
          
    made with esnextbin

  
## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNextbin Sketch</title>
  <!-- put additional styles and scripts here -->
</head>
<body>
  <!-- put markup and other contents here -->
</body>
</html>

## index.js
let regl = require('regl')()
const mat4 = require('gl-mat4')
const bunny = require('bunny')


const drawBunny = regl({
  vert: `
  precision mediump float;
  attribute vec3 position;
  uniform mat4 model, view, projection;
  void main() {
    gl_Position = projection * view * model * vec4(position, 1);
  }`,

  frag: `
  precision mediump float;
  void main() {
    gl_FragColor = vec4(1, 1, 1, 1);
  }`,

  // this converts the vertices of the mesh into the position attribute
  attributes: {
    position: bunny.positions
  },

  // and this converts the faces fo the mesh into elements
  elements: bunny.cells,

  uniforms: {
    model: mat4.identity([]),
    view: ({tick}) => {
      const t = 0.01 * tick
      return mat4.lookAt([],
        [30 * Math.cos(t), 2.5, 30 * Math.sin(t)],
        [0, 2.5, 0],
        [0, 1, 0])
    },
    projection: ({viewportWidth, viewportHeight}) =>
      mat4.perspective([],
        Math.PI / 4,
        viewportWidth / viewportHeight,
        0.01,
        1000)
  }
})

regl.frame(() => {
  regl.clear({
    depth: 1,
    color: [0, 0, 0, 1]
  })

  drawBunny()
})

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "regl": "1.3.0",
    "gl-mat4": "1.1.4",
    "bunny": "1.0.1"
  }
}

## transpiled.js
'use strict';

var regl = require('regl')();
var mat4 = require('gl-mat4');
var bunny = require('bunny');

var drawBunny = regl({
  vert: '\n  precision mediump float;\n  attribute vec3 position;\n  uniform mat4 model, view, projection;\n  void main() {\n    gl_Position = projection * view * model * vec4(position, 1);\n  }',

  frag: '\n  precision mediump float;\n  void main() {\n    gl_FragColor = vec4(1, 1, 1, 1);\n  }',

  // this converts the vertices of the mesh into the position attribute
  attributes: {
    position: bunny.positions
  },

  // and this converts the faces fo the mesh into elements
  elements: bunny.cells,

  uniforms: {
    model: mat4.identity([]),
    view: function view(_ref) {
      var tick = _ref.tick;

      var t = 0.01 * tick;
      return mat4.lookAt([], [30 * Math.cos(t), 2.5, 30 * Math.sin(t)], [0, 2.5, 0], [0, 1, 0]);
    },
    projection: function projection(_ref2) {
      var viewportWidth = _ref2.viewportWidth;
      var viewportHeight = _ref2.viewportHeight;
      return mat4.perspective([], Math.PI / 4, viewportWidth / viewportHeight, 0.01, 1000);
    }
  }
});

regl.frame(function () {
  regl.clear({
    depth: 1,
    color: [0, 0, 0, 1]
  });

  drawBunny();
});
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNextbin Sketch</title>
	<!-- put additional styles and scripts here -->
	</head>
	<body>
	<!-- put markup and other contents here -->
	</body>
	</html>
	let regl = require('regl')()
	const mat4 = require('gl-mat4')
	const bunny = require('bunny')


	const drawBunny = regl({
	vert: `
	precision mediump float;
	attribute vec3 position;
	uniform mat4 model, view, projection;
	void main() {
	gl_Position = projection * view * model * vec4(position, 1);
	}`,

	frag: `
	precision mediump float;
	void main() {
	gl_FragColor = vec4(1, 1, 1, 1);
	}`,

	// this converts the vertices of the mesh into the position attribute
	attributes: {
	position: bunny.positions
	},

	// and this converts the faces fo the mesh into elements
	elements: bunny.cells,

	uniforms: {
	model: mat4.identity([]),
	view: ({tick}) => {
	const t = 0.01 * tick
	return mat4.lookAt([],
	[30 * Math.cos(t), 2.5, 30 * Math.sin(t)],
	[0, 2.5, 0],
	[0, 1, 0])
	},
	projection: ({viewportWidth, viewportHeight}) =>
	mat4.perspective([],
	Math.PI / 4,
	viewportWidth / viewportHeight,
	0.01,
	1000)
	}
	})

	regl.frame(() => {
	regl.clear({
	depth: 1,
	color: [0, 0, 0, 1]
	})

	drawBunny()
	})
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"regl": "1.3.0",
	"gl-mat4": "1.1.4",
	"bunny": "1.0.1"
	}
	}
	'use strict';

	var regl = require('regl')();
	var mat4 = require('gl-mat4');
	var bunny = require('bunny');

	var drawBunny = regl({
	vert: '\n precision mediump float;\n attribute vec3 position;\n uniform mat4 model, view, projection;\n void main() {\n gl_Position = projection * view * model * vec4(position, 1);\n }',

	frag: '\n precision mediump float;\n void main() {\n gl_FragColor = vec4(1, 1, 1, 1);\n }',

	// this converts the vertices of the mesh into the position attribute
	attributes: {
	position: bunny.positions
	},

	// and this converts the faces fo the mesh into elements
	elements: bunny.cells,

	uniforms: {
	model: mat4.identity([]),
	view: function view(_ref) {
	var tick = _ref.tick;

	var t = 0.01 * tick;
	return mat4.lookAt([], [30 * Math.cos(t), 2.5, 30 * Math.sin(t)], [0, 2.5, 0], [0, 1, 0]);
	},
	projection: function projection(_ref2) {
	var viewportWidth = _ref2.viewportWidth;
	var viewportHeight = _ref2.viewportHeight;
	return mat4.perspective([], Math.PI / 4, viewportWidth / viewportHeight, 0.01, 1000);
	}
	}
	});

	regl.frame(function () {
	regl.clear({
	depth: 1,
	color: [0, 0, 0, 1]
	});

	drawBunny();
	});