0.0.4 • Published 3 years ago

webgl-example v0.0.4

Weekly downloads
16
License
MIT
Repository
github
Last release
3 years ago

webgl-example

Build Status npm-download npm-version-requirement yarn-version-requirement node-version-requirement

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