Permalink
Browse files

rendering textures

  • Loading branch information...
tmpvar committed Aug 24, 2011
1 parent 3a28720 commit aacf27a4bde15e23cc4d28ac3af9b62bbd97741e
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
@@ -78,16 +78,16 @@ JSBool js_readimage(JSContext *cx, uintN argc, jsval *argv) {
}
JSObject *ret = JS_NewObject(cx, NULL, NULL, NULL);
- unsigned int length = img.Height*img.Width*img.BytesPerPixel;
+ unsigned long size = img.Height*img.Width*img.BytesPerPixel;
+ unsigned long length = img.Height*img.Width;
char c_length[10];
- sprintf(c_length, "%d", length);
+ sprintf(c_length, "%d", size);
// TODO: there has to be a better way!
jsval array;
string cpp_string = "new Uint32Array(";
cpp_string += c_length;
cpp_string += ");";
- cout << cpp_string << endl;
const char *src = cpp_string.c_str();
if (!JS_EvaluateScript(cx, JS_GetGlobalObject(cx), src, strlen(src), __FILE__, __LINE__, &array)) {
@@ -104,8 +104,9 @@ JSBool js_readimage(JSContext *cx, uintN argc, jsval *argv) {
}
js::TypedArray *tarray = js::TypedArray::fromJSObject(typedArrayObject);
- memcpy(tarray->data, img.Data, length);
+ memcpy(tarray->data, img.Data, size);
+ unsigned char *data = (unsigned char *)tarray->data;
if (!JS_SetProperty(cx, ret, "data", &array)) {
return JS_FALSE;
}
View
Binary file not shown.
View
@@ -0,0 +1,10 @@
+#ifdef GL_ES
+precision highp float;
+#endif
+
+varying vec2 vTextureCoord;
+uniform sampler2D sampler;
+
+void main(void) {
+ gl_FragColor = texture2D(sampler, vTextureCoord);
+}
View
@@ -2,25 +2,21 @@ var webgl = require('../lib/webgl.js');
var Image = webgl.DOMImage;
var vertices = [
- 0.8, 0.8, 0.0,
- -0.8, 0.8, 0.0,
- 0.8, -0.8, 0.0,
- -0.8, -0.8, 0.0
+ 0.8, 0.8, 0.0, 1.0,
+ -0.8, 0.8, 0.0, 1.0,
+ 0.8, -0.8, 0.0, 1.0,
+ -0.8, -0.8, 0.0, 1.0
];
-var textureCoords = [
- 0.0, 0.0,
- 1.0, 0.0,
- 1.0, 1.0,
- 0.0, 1.0,
-];
-
-
function e(name, result) {
+ console.log(" ");
var e = gl.getError()
if (e) {
console.log(name, 'failed!', e);
fail();
+ } else if (result === -1) {
+ console.log(name, ' result code was -1');
+ fail();
} else {
console.log(name, 'passed! (', JSON.stringify(result), ')');
}
@@ -30,43 +26,56 @@ function e(name, result) {
var gl = new webgl.WebGLRenderingContext();
var program = e('create program', gl.createProgram());
var shaders = {
- frag : "#ifdef GL_ES\nprecision highp float;\n#endif\n\nvarying vec2 vTextureCoord;\n\nuniform sampler2D uSampler;\n\nvoid main(void) {\n gl_FragColor = texture2D(uSampler, vec2(0, 0));\n}",
- vertex : "attribute vec3 aVertexPosition;\nattribute vec2 aTextureCoord;varying vec2 vTextureCoord;\n\n\nvoid main(void) {\n gl_Position = vec4(aVertexPosition, 1.0);\n vTextureCoord = aTextureCoord;\n}"
+ frag : readfile('../example/triangle.frag'),
+ vertex : readfile('../example/triangle.vertex')
};
var vertexShader = e('create shader', gl.createShader(gl.VERTEX_SHADER));
-var fragShader = e('create shader', gl.createShader(gl.FRAGMENT_SHADER));
+var fragShader = e('create shader', gl.createShader(gl.FRAGMENT_SHADER));
-e('shader source', gl.shaderSource(vertexShader, shaders.vertex));
-e('shader source', gl.shaderSource(fragShader, shaders.frag));
+e('shader source', gl.shaderSource(vertexShader, shaders.vertex));
+e('shader source', gl.shaderSource(fragShader, shaders.frag));
e('compile shader', gl.compileShader(vertexShader));
e('compile shader', gl.compileShader(fragShader));
-e('attach shader', gl.attachShader(program, vertexShader));
-e('attach shader', gl.attachShader(program, fragShader));
-e('link program', gl.linkProgram(program));
+e('attach shader', gl.attachShader(program, vertexShader));
+e('attach shader', gl.attachShader(program, fragShader));
+e('link program', gl.linkProgram(program));
+e('use program', gl.useProgram(program));
+
+var attr = e('attribute location', gl.getAttribLocation(program, "aVertexPosition"));
+var textureAttr = e('texture location', gl.getAttribLocation(program, "aTextureCoord"));
+var samplerUniform = e('get uSampler uniform', gl.getUniformLocation(program, "sampler"));
+e('uniformi', gl.uniform1i(samplerUniform, 0));
+
// Setup texture
var img = new Image();
-var texture;
+var textureImage;
img.onload = function() {
- texture = e('create texture', gl.createTexture());
+ textureImage = e('create texture', gl.createTexture());
- e('bind texture', gl.bindTexture(gl.TEXTURE_2D, texture));
- e('pixel store', gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true));
+ e('bind texture', gl.bindTexture(gl.TEXTURE_2D, textureImage));
- e('tex image 2d', gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, img));
- e('tex param mag filter', gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST));
- e('tex param min filter', gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST));
- e('bind texture', gl.bindTexture(gl.TEXTURE_2D, null));
+ e('tex image 2d', gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img));
+
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
};
// TODO: this will not always be sync!
-img.src = "../example/white32.tga";
+img.src = "../example/evil_monkey_9.tga";
var squareTextureBuffer = e('create texture buffer', gl.createBuffer());
e('bind texture buffer', gl.bindBuffer(gl.ARRAY_BUFFER, squareTextureBuffer));
-e('buffer texture coords', gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW));
+e('buffer texture coords', gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+ 1.0, 1.0,
+ 0.0, 1.0,
+ 1.0, 0.0,
+ 0.0, 0.0
+]), gl.STATIC_DRAW));
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.log("Could not link program.\n Error:", gl.getError());
@@ -75,39 +84,28 @@ if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
}
-var attr = e('attribute location', gl.getAttribLocation(program, "aVertexPosition"));
-var textureAttr = e('texture location', gl.getAttribLocation(program, "aTextureCoord"));
-
-var samplerUniform = e('get uSampler uniform', gl.getUniformLocation(program, "uSampler"));
-
var vertexBuffer = e('create buffer', gl.createBuffer());
-e('bind buffer', gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer));
-e('buffer data', gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW));
+e('bind buffer', gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer));
+e('buffer data', gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW));
+e('viewport', gl.viewport(0, 0, 300, 300));
+e('enable vertex attrib array', gl.enableVertexAttribArray(attr));
+e('enable texture attrib array', gl.enableVertexAttribArray(textureAttr));
+e('bind buffer', gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer));
+e('vertex pointer', gl.vertexAttribPointer(attr, 4, gl.FLOAT, false, 0, 0));
+e('bind texture buffer', gl.bindBuffer(gl.ARRAY_BUFFER, squareTextureBuffer));
+e('vertex point texture', gl.vertexAttribPointer(textureAttr, 2, gl.FLOAT, false, 0, 0));
+e('enable depth test', gl.enable(gl.DEPTH_TEST));
-e('viewport', gl.viewport(0, 0, 300, 300));
-e('use program', gl.useProgram(program));
-e('enable vertex attrib array', gl.enableVertexAttribArray(attr));
-var a = 2000;
+var a = 50000;
while(a--) {
+ e('bind texture', gl.bindTexture(gl.TEXTURE_2D, textureImage));
- e('bind buffer', gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer));
- e('vertex pointer', gl.vertexAttribPointer(attr, 3, gl.FLOAT, false, 0, 0));
-
- e('bind texture buffer', gl.bindBuffer(gl.ARRAY_BUFFER, squareTextureBuffer));
- e('vertex point texture', gl.vertexAttribPointer(textureAttr, 2, gl.FLOAT, false, 0, 0));
-
- e('set active texture', gl.activeTexture(gl.TEXTURE0));
- e('bind texture', gl.bindTexture(gl.TEXTURE_2D, texture));
- e('uniformi', gl.uniform1i(samplerUniform, 0));
-
- e('enable depth test', gl.enable(gl.DEPTH_TEST));
- e('clear color', gl.clearColor(0.5, 0.5, 0.5, 1));
- e('clear', gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT));
- e('draw arrays', gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4));
- e('flush', gl.flush());
+ e('clear color', gl.clearColor(0.5, 0.5, 0.5, 1));
+ e('clear', gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT));
+ e('draw arrays', gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4));
+ e('flush', gl.flush());
}
-console.log("DONE");
View
@@ -0,0 +1,9 @@
+attribute vec4 aVertexPosition;
+attribute vec2 aTextureCoord;
+
+varying vec2 vTextureCoord;
+
+void main(void) {
+ gl_Position = gl_ModelViewProjectionMatrix * aVertexPosition;
+ vTextureCoord = aTextureCoord;
+}
View
Binary file not shown.
View
@@ -135,8 +135,7 @@ JSBool webgl_rendering_context_bufferData(JSContext *cx, uintN argc, jsval *argv
}
js::TypedArray *tarray = js::TypedArray::fromJSObject(array);
- float *data = (float *)tarray->data;
- glBufferData(target, tarray->byteLength, data, usage);
+ glBufferData(target, tarray->byteLength, tarray->data, usage);
return JS_TRUE;
}
@@ -366,7 +365,17 @@ JSBool webgl_rendering_context_drawArrays(JSContext *cx, uintN argc, jsval *argv
JSBool webgl_rendering_context_drawElements(JSContext *cx, uintN argc, jsval *argv) {
+ unsigned int mode;
+ GLint first;
+ GLsizei count;
+ if (!JS_ConvertArguments(cx, argc, JS_ARGV(cx, argv), "iii", &mode, &first, &count)) {
+ return JS_FALSE;
+ }
+
+ //glDrawElements(mode, first, count);
+
+ return JS_TRUE;
}
@@ -776,6 +785,9 @@ JSBool webgl_rendering_context_texImage2D_Image(JSContext *cx, uintN argc, jsval
unsigned int type;
JSObject *image;
+/* void texImage2D(GLenum target, GLint level, GLenum internalformat,
+ GLenum format, GLenum type, HTMLImageElement image);
+*/
if (!JS_ConvertArguments(cx, argc, JS_ARGV(cx, argv), "iiiiio", &target, &level, &internalFormat, &format, &type, &image)) {
return JS_FALSE;
}
@@ -802,10 +814,13 @@ JSBool webgl_rendering_context_texImage2D_Image(JSContext *cx, uintN argc, jsval
if (!JS_GetProperty(cx, image, "data", &js_data)) {
return JS_FALSE;
}
+
JSObject *dataObject = JSVAL_TO_OBJECT(js_data);
js::TypedArray *tarray = js::TypedArray::fromJSObject(dataObject);
- glTexImage2D(target, level, internalFormat, width, height, 0, format, type, tarray->data);
+ const unsigned char *data = (unsigned char *)tarray->data;
+
+ glTexImage2D(target, level, internalFormat, width, height, 0, format, type, data);
return JS_TRUE;
}

0 comments on commit aacf27a

Please sign in to comment.