0.0.4 • Published 3 years ago
webgl-example v0.0.4
webgl-example
Introduction
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.
Requirements
- Node 14.15.4
- NPM 6.14.10
- YARN 1.22.0+
Concept
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.
How to use
- Package Manager
$ npm i webgl-example
import 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>
Configure
- Webpack
rules: [
{
test: /\.glsl$/,
use: [ 'shader-loader' ]
},
]
Examples
0.0.4
3 years ago
0.0.2-gandis.8
3 years ago
0.0.2-gandis.7
3 years ago
0.0.2-gandis.6
3 years ago
0.0.2-gandis.5
3 years ago
0.0.2-gandis.9
3 years ago
0.0.2-gandis.4
3 years ago
0.0.2-gandis.3
3 years ago
0.0.2-gandis.2
3 years ago
0.0.2-gandis.1
3 years ago
0.0.3
3 years ago
0.0.4-beta.0
3 years ago
0.0.2-gandis.13
3 years ago
0.0.2-gandis.12
3 years ago
0.0.2-gandis.10
3 years ago
0.0.2-gandis.0
3 years ago
0.0.2
3 years ago
0.0.1
3 years ago
0.0.0-gandis.1
3 years ago
0.0.0-gandis.0
3 years ago
0.0.0-charles.1
3 years ago
0.0.0-charles.0
3 years ago
1.0.0
3 years ago
0.0.0
3 years ago