webgl-example is an open source for implementing basic examples such as 3D Rendering, Image Processing, Light Effect, etc. It started for easily apply to a blog or web site.
- Node 14.15.4
- NPM 6.14.10
- YARN 1.22.0+
webgl-example has a very simple structure and has three representative components.
- Renderer is responsible that rendering objects.
- Action is responsible that for user interaction and control a view(Renderer) and objects.
- Window has a renderer and an action, provides function APIs to the user.
- Package Manager
$ npm i webgl-exampleimport SharpenImageWindow from 'webgl-example/src/window/SharpenImageWindow';
const imageWindow = new SharpenImageWindow(HTMLElement);
const image = new Image();
image.src = "<Image resource address>";
image.addEventListener('load', function() {
imageWindow.setImage(image);
});- Bundle
<script src="./webgl-example.bundle.js"></script>
<script>
window.addEventListener('load', function() {
const divElement = document.getElementById("divElement");
const imageWindow = new webglexample.window.EdgeImageWindow(divElement);
const image = new Image();
image.src = "<Image resource address>";
image.addEventListener('load', function() {
imageWindow.setImage(image);
});
});
</script>
<body>
<div id="divElement"></div>
</body>- Webpack
rules: [
{
test: /\.glsl$/,
use: [ 'shader-loader' ]
},
]
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent