Last active
February 14, 2018 14:49
-
-
Save pissang/7e04ced163da9f727a2a6e5244547393 to your computer and use it in GitHub Desktop.
ClayGL minimal project, bundle file is 39kb after gziped
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <body> | |
| <canvas id="main" style="width:400px;height:400px;"></canvas> | |
| <script src="./dist/bundle.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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