https://github.com/mikolalysenko/simple-3d-shader

A simple 3D webgl shader
https://github.com/mikolalysenko/simple-3d-shader

Last synced: about 2 months ago
JSON representation

A simple 3D webgl shader

• Host: GitHub
• URL: https://github.com/mikolalysenko/simple-3d-shader
• Owner: mikolalysenko
• License: mit
• Created: 2013-06-23T02:54:02.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2013-06-24T15:30:15.000Z (over 11 years ago)
• Last Synced: 2024-10-20T14:28:20.162Z (2 months ago)
• Language: JavaScript
• Homepage: http://mikolalysenko.github.io/simple-3d-shader/
• Size: 336 KB
• Stars: 7
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
simple-3d-shader

================

A simple 3d shader for WebGL

## Example

[Try it in your browser](http://mikolalysenko.github.io/simple-3d-shader/)

```javascript

var shell = require("gl-now")()

var createMesh = require("gl-mesh")

var glm = require("gl-matrix")

var simple3DShader = require("simple-3d-shader")

var shader, mesh

shell.on("gl-init", function() {

  shader = simple3DShader(shell.gl)

  mesh = createMesh(shell.gl, require("bunny"))

})

shell.on("gl-render", function(t) {

  //Bind shader

  shader.bind()

  

  //Set camera parameters

  var A = new Float32Array(16), B = new Float32Array(16)

  shader.uniforms.projection = glm.mat4.perspective(A, Math.PI/4.0, shell.width/shell.height, 0.1, 1000.0)

  shader.uniforms.view = glm.mat4.lookAt(A, [0, 3, 20], [0, 3, 0], [0,1,0])

  glm.mat4.identity(A)

  shader.uniforms.model = glm.mat4.rotateY(B, A, 0.001 * Date.now())

  

  //Set color

  shader.attributes.color = [1, 0.7, 0.3]

  

  //Draw object

  mesh.bind(shader)

  mesh.draw()

  mesh.unbind()

})

```

Here is what it should look like assuming everything worked:



## Install

Use [npm](https://npmjs.org/) to install it locally:

    npm install simple-3d-shader

    

Then you can build/run the client using any tool that compiles CommonJS modules, for example [browserify](https://github.com/substack/node-browserify) or [beefy](https://github.com/chrisdickinson/beefy).

## API

```javascript

var simple3DShader = require("simple-3d-shader")

```

### `var shader = simple3DShader(gl)`

Creates a simple 3d shader

* `gl` is a handle to the WebGL context that the shader will be created in.

**Returns** A `gl-shader` object for the shader.

## Credits

(c) 2013 Mikola Lysenko. MIT License