Skip to content

Instantly share code, notes, and snippets.

@noboko

noboko/app.fshader

Created March 30, 2012 19:14
Show Gist options
  • Save noboko/2254178 to your computer and use it in GitHub Desktop.
Save noboko/2254178 to your computer and use it in GitHub Desktop.
Download ZIP
Learning WebGL for Plask Lesson 06
Raw
app.fshader
#ifdef GL_ES
precision highp float;
#endif
varying vec2 vTextureCoord;
uniform sampler2D uSampler;
void main(void) {
gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
}
Raw
app.js
//Learning WebGL for Plask Lesson6
//Learing WebGL : http://learningwebgl.com/blog/?page_id=1217
//Github : https://github.com/gpjt/webgl-lessons (this script use 'crate.gif'.)
//
//元ネタは十字カーソルとページアップダウンにボタン割り当てですが、手持ちの環境にページアップ/ダウンボタンがないので
//rotateをwsad, zoomをqe,filterをf,付け加えてresetにrを割り当ててます。
//
//Plask : http://www.plask.org/
var path = require('path');
var plask = require('plask');
plask.simpleWindow({
settings: {
width: 1280,
height: 720,
type: '3d', // Create an OpenGL window.
vsync: true, // Prevent tearing.
multisample: true // Anti-alias.
},
init: function() {
var gl = this.gl;
this.framerate(60);
this.param ={
xRot : 0,
xSpeed : 0,
yRot : 0,
ySpeed : 0,
z : -5.0,
t_filter : 0,
}
this.on('keyDown', function(e) {
// The |str| property on the key event is a string of the unicode
// translation of the key. Take bigger steps while holding shift.
switch (e.str) {
case 'w': this.param.ySpeed -= 0.01; break;
case 's': this.param.ySpeed += 0.01; break;
case 'a': this.param.xSpeed -= 0.01; break;
case 'd': this.param.xSpeed += 0.01; break;
case 'q': this.param.z += 0.05; break;
case 'e': this.param.z -= 0.05; break;
case 'f': this.param.t_filter += 1; break;
case 'r': this.param = {
xRot : 0,
xSpeed : 0,
yRot : 0,
ySpeed : 0,
z : -5.0,
t_filter : 0,
};
break;//reset
}
this.redraw();
});
// Read/compile/link the shaders into a MagicProgram. The |mprogram|
// object created has methods to set the shader uniform variables.
this.mprogram = new plask.gl.MagicProgram.createFromBasename(
gl, __dirname, 'app');
// Create the three 3d (xyz) vertices for the triangle. This creates the
// geometry and loads it into an Vertex Buffer Object (VBO).
function makeBuffer(ar,itemSize) {
var buffer = gl.createBuffer();
var data = new Float32Array(ar);
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
return {buffer: buffer, num: data.length / itemSize, data: data, itemSize: itemSize};
}
function makeEABuffer(ar,itemSize) {
var buffer = gl.createBuffer();
var data = new Uint16Array(ar);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, data, gl.STATIC_DRAW);
return {buffer: buffer, num: data.length / itemSize, data: data, itemSize: itemSize};
}
this.cubeVertexPositionBuffer = makeBuffer([
-1.0, -1.0, 1.0,
1.0, -1.0, 1.0,
1.0, 1.0, 1.0,
-1.0, 1.0, 1.0,
// Back face
-1.0, -1.0, -1.0,
-1.0, 1.0, -1.0,
1.0, 1.0, -1.0,
1.0, -1.0, -1.0,
// Top face
-1.0, 1.0, -1.0,
-1.0, 1.0, 1.0,
1.0, 1.0, 1.0,
1.0, 1.0, -1.0,
// Bottom face
-1.0, -1.0, -1.0,
1.0, -1.0, -1.0,
1.0, -1.0, 1.0,
-1.0, -1.0, 1.0,
// Right face
1.0, -1.0, -1.0,
1.0, 1.0, -1.0,
1.0, 1.0, 1.0,
1.0, -1.0, 1.0,
// Left face
-1.0, -1.0, -1.0,
-1.0, -1.0, 1.0,
-1.0, 1.0, 1.0,
-1.0, 1.0, -1.0,
],3);
this.cubeVertexIndexBuffer = makeEABuffer([
0, 1, 2, 0, 2, 3, // Front face
4, 5, 6, 4, 6, 7, // Back face
8, 9, 10, 8, 10, 11, // Top face
12, 13, 14, 12, 14, 15, // Bottom face
16, 17, 18, 16, 18, 19, // Right face
20, 21, 22, 20, 22, 23 // Left face
],1);
this.cubeVertexTextureCoordBuffer = makeBuffer([
// Front face
0.0, 0.0,
1.0, 0.0,
1.0, 1.0,
0.0, 1.0,
// Back face
1.0, 0.0,
1.0, 1.0,
0.0, 1.0,
0.0, 0.0,
// Top face
0.0, 1.0,
0.0, 0.0,
1.0, 0.0,
1.0, 1.0,
// Bottom face
1.0, 1.0,
0.0, 1.0,
0.0, 0.0,
1.0, 0.0,
// Right face
1.0, 0.0,
1.0, 1.0,
0.0, 1.0,
0.0, 0.0,
// Left face
0.0, 0.0,
1.0, 0.0,
1.0, 1.0,
0.0, 1.0,
],2);
function handleLoadedTexture(textures) {
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
gl.bindTexture(gl.TEXTURE_2D, textures[0].texture);
gl.texImage2DSkCanvas(gl.TEXTURE_2D, 0, textures[0].image);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.bindTexture(gl.TEXTURE_2D, textures[1].texture);
gl.texImage2DSkCanvas(gl.TEXTURE_2D, 0, textures[1].image);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.bindTexture(gl.TEXTURE_2D, textures[2].texture);
gl.texImage2DSkCanvas(gl.TEXTURE_2D, 0, textures[2].image);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
gl.generateMipmap(gl.TEXTURE_2D);
gl.bindTexture(gl.TEXTURE_2D, null);
}
function initTexture(fileName) {
var crateImage = new plask.SkCanvas.createFromImage(path.join(__dirname, fileName));
var ar = [];
for (var i=0; i < 3; i++) {
ar[i] = {};
ar[i].texture = gl.createTexture();
ar[i].image = crateImage;
}
return ar;
}
this.textures = initTexture('crate.gif');
handleLoadedTexture(this.textures);
gl.viewport(0, 0, this.width, this.height);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clearDepth(1.0)
gl.enable(gl.DEPTH_TEST);
//gl.enable(gl.TEXTURING);
//gl.enable(gl.TEXTURE_2D);
gl.depthFunc(gl.LEQUAL);
},
draw: function() {
var gl = this.gl;
var cubeVertexPositionBuffer = this.cubeVertexPositionBuffer;
var cubeVertexTextureCoordBuffer = this.cubeVertexTextureCoordBuffer;
var cubeVertexIndexBuffer = this.cubeVertexIndexBuffer;
//var filter =1;
var mprogram = this.mprogram;
var param = this.param;
// Clear the background to gray. The depth buffer isn't really needed for
// a single triangle, but generally the depth buffer should also be cleared.
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// Build the "model-view" matrix, which will rotate the triangle based on
// the mouse controls.
var mv = new plask.Mat4();
mv.translate(0.0, 0.0, param.z);
param.xRot += param.xSpeed * this.frametime ;
param.yRot += param.ySpeed * this.frametime ;
//console.log(param.xRot);
mv.rotate(param.xRot* plask.kPI /180, 0, 1, 0);
mv.rotate(param.yRot* plask.kPI /180, 1, 0, 0);
// Build the "perspective" matrix, which will apply the aspect ratio,
// perspective divide, and clipping planes.
var persp = new plask.Mat4();
persp.perspective(45, this.width / this.height, 0.1, 100.0);
// Set the shaders to be used during drawing, and pass the current
// transformation matrices to them.
mprogram.use();
mprogram.set_uPMatrix(persp);
mprogram.set_uMVMatrix(mv);
mprogram.set_uSampler(0);
// Draw the geometry from the VBO, passing the vertices to the vertex
// shader as a vec3 named |a_xyz|.
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer.buffer);
gl.vertexAttribPointer(mprogram.location_aVertexPosition,
cubeVertexPositionBuffer.itemSize,
gl.FLOAT,
false, 0, 0);
gl.enableVertexAttribArray(mprogram.location_aVertexPosition);
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer.buffer);
gl.vertexAttribPointer(mprogram.location_aTextureCoord,
cubeVertexTextureCoordBuffer.itemSize,
gl.FLOAT,
false, 0, 0);
gl.enableVertexAttribArray(mprogram.location_aTextureCoord);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer.buffer);
param.t_filter=param.t_filter % 3;
gl.bindTexture(gl.TEXTURE_2D, this.textures[param.t_filter].texture);
gl.drawElements(gl.TRIANGLES, cubeVertexIndexBuffer.num, gl.UNSIGNED_SHORT, 0);
}
});
Raw
app.vshader
attribute vec3 aVertexPosition;
attribute vec2 aTextureCoord;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
varying vec4 vColor;
varying vec2 vTextureCoord;
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vTextureCoord = aTextureCoord;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment