Skip to content

Instantly share code, notes, and snippets.

@pissang
Last active February 14, 2018 14:49
Show Gist options
  • Save pissang/7e04ced163da9f727a2a6e5244547393 to your computer and use it in GitHub Desktop.
Save pissang/7e04ced163da9f727a2a6e5244547393 to your computer and use it in GitHub Desktop.
ClayGL minimal project, bundle file is 39kb after gziped
<html>
<body>
<canvas id="main" style="width:400px;height:400px;"></canvas>
<script src="./dist/bundle.js"></script>
</body>
</html>
import Renderer from 'claygl/src/Renderer';
import Timeline from 'claygl/src/animation/Timeline';
import Scene from 'claygl/src/Scene';
import Shader from 'claygl/src/Shader';
import Material from 'claygl/src/Material';
import PerspectiveCamera from 'claygl/src/camera/Perspective';
import Geometry from 'claygl/src/Geometry';
import Mesh from 'claygl/src/Mesh';
const vertexShader = `
attribute vec3 position: POSITION;
void main() {
gl_Position = vec4(position, 1.0);
}
`;
const fragmentShader = `
void main() {
gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
}
`;
const TRIANGLE_POSITIONS = [
[-0.5, -0.5, 0],
[0.5, -0.5, 0],
[0, 0.5, 0]
];
const renderer = new Renderer({
canvas: document.getElementById('main')
});
renderer.resize(400, 400);
const scene = new Scene();
const dummyCamera = new PerspectiveCamera();
const triangleGeo = new Geometry();
const timeline = new Timeline();
triangleGeo.attributes.position.fromArray(TRIANGLE_POSITIONS);
const mesh = new Mesh({
geometry: triangleGeo,
material: new Material({
shader: new Shader(vertexShader, fragmentShader)
})
});
scene.add(mesh);
// Start the render loop
timeline.on('frame', function () {
renderer.render(scene, dummyCamera);
});
timeline.start();
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: ['./src/main.js'],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
plugins: [
new webpack.optimize.ModuleConcatenationPlugin()
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment