I have to implement these options with WebGL. I'm currently getting the following error: "WebGL: INVALID_OPERATION: drawArrays: attempt to access out of bounds arrays". However, my question isn't just about that. I wan't to know if I'm doing it the right way in general.
I believe the following code is the critical part I'm not doing right. What we are trying to do is load with a color shader and only when a texture is loaded, the texture replaces the color shader.
I'm new to this topic, please help! I'll be updating with any further details you may need.
function renderScene() {
gl.viewport(pgl.viewport.x, pgl.viewport.y, pgl.viewport.width, pgl.viewport.height);
gl.clear(gl.COLOR_BUFFER_BIT);
var modelViewMatrix = mat4.create();
mat4.multiply(modelViewMatrix, viewMatrix, modelMatrix);
gl.useProgram(pgl.shaderProgram);
gl.uniformMatrix4fv(pgl.shaderProgram.uModelViewMatrix, false, modelViewMatrix);
gl.uniformMatrix4fv(pgl.shaderProgram.uProjMatrix, false, projMatrix);
gl.enableVertexAttribArray(pgl.shaderProgram.aPosition);
gl.bindBuffer(gl.ARRAY_BUFFER, pgl.vbo);
gl.vertexAttribPointer(pgl.shaderProgram.aPosition, 3, gl.FLOAT, false, 0, 0);
if (isColor) {
gl.enableVertexAttribArray(pgl.shaderProgram.aColor);
gl.bindBuffer(gl.ARRAY_BUFFER, pgl.vboColor);
gl.vertexAttribPointer(pgl.shaderProgram.aColor, 4, gl.FLOAT, false, 0, 0);
} else {
gl.disableVertexAttribArray(pgl.shaderProgram.aColor);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.enableVertexAttribArray(pgl.shaderProgram.aTexture);
gl.bindBuffer(gl.ARRAY_BUFFER, pgl.vboTexture);
gl.vertexAttribPointer(pgl.shaderProgram.aTexture, 2, gl.FLOAT, false, 0, 0);
gl.uniform1i(pgl.shaderProgram.uSampler, 0);
}
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);
requestAnimationFrame(renderScene);
updateScene();
}
This is the UI
(Pastebin.com) Here's the complete code I'm working on... sorry if it's a mess.
Related
Is it possible to set value of alpha channel when providing fill and stroke colors in PDFlib?
$p->setlinewidth(20);
$p->setcolor('fill', 'rgb', 1, 0, 0, null);
$p->setcolor('stroke', 'rgb', 0, 1, 0, null);
$p->rect(0, 0, 100, 100);
$p->fill_stroke();
Is it possible to make rectangle's red fill and thick green border to be semi-transparent?
Is it possible to make rectangle's red fill and thick green border to be semi-transparent?
sure, please use GState for this task. You find a complete sample code within the PDFlib cookbook: Transparent Graphics
/* Save the current graphics state. The save/restore of the current
* state is not necessarily required, but it will help you get back to
* a graphics state without any transparency.
*/
$gstate = $p->create_gstate("opacityfill=.5 opacitystroke=.5");
$p->save();
$p->set_gstate($gstate);
$p->setlinewidth(20);
$p->setcolor('fill', 'rgb', 1, 0, 0, null);
$p->setcolor('stroke', 'rgb', 0, 1, 0, null);
$p->rect(0, 0, 100, 100);
$p->fill_stroke();
$p->restore();
For a powerful path generation, you might use the Path object. See PDFlib 9.2 Documentation as well the samples within PDFlib Cookbook - path objects.
page.drawText(WATERMARK.LABEL, {
x: 180,
y: 400,
size: 30,
font: helveticaFont,
color: rgb(220 / 255, 220 / 255, 220 / 255),
rotate: degrees(-315),
opacity: 0.6
})
// add opacity field only
Im try to get a super simple lwjgl app going that draws a simple triangle, but cant find the right order of calls to make anything meaningful appear. im using a simple vertex buffer and no shaders.
for some reason each frame is a white triangle on the lower right side of the frame, regardless of what is in the actual vertex buffer.
public void run() {
GLFWErrorCallback.createThrow().set();
glfwInit();
glfwDefaultWindowHints();
glfwWindowHint(GLFW_RESIZABLE, GLFW_TRUE);
glfwWindowHint(GLFW_VISIBLE, GLFW_FALSE);
long h_window = glfwCreateWindow(640, 480, "test", 0, 0);
glfwShowWindow(h_window);
glfwMakeContextCurrent(h_window);
GL.createCapabilities();
glEnableClientState(GL_VERTEX_ARRAY);
int b_vertex = glGenBuffers();
float[] vertex = {
0,0,0,
0,0,0,
0,0,0
};
glBindBuffer(GL_ARRAY_BUFFER, b_vertex);
glBufferData(GL_ARRAY_BUFFER, vertex, GL_STATIC_DRAW);
glBindBuffer(GL_ARRAY_BUFFER, 0);
while (!glfwWindowShouldClose(h_window)) {
glClearColor(0, 0, 0, 0);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glEnableVertexAttribArray(0);
glBindBuffer(GL_ARRAY_BUFFER, b_vertex);
glVertexAttribPointer(0, 3, GL_FLOAT, false, 0, 0L);
glDrawArrays(GL_TRIANGLES, 0, 3);
glDisableVertexAttribArray(0);
glfwSwapBuffers(h_window);
glfwWaitEventsTimeout(1f / 30f);
}
}
im definitely missing something, but have no idea what it is. here is what this shows:
Screenshot of Running app
Found the problem.
glVertexPointer(3, GL_FLOAT, 0, 0L);
is for shaderless buffer descriptions
glVertexAttribPointer(0, 3, GL_FLOAT, false, 0, 0L);
is for buffer descriptions that also bind buffers to shader inputs
I would like to do some standard color transformation on a Loader object (Which is used to display a picture) like Sepia, Black & White etc...
I'm currently using methods like this one :
var colorTransformer:ColorTransform = selectedItm.transform.colorTransform;
colorTransformer.redMultiplier = 1/6;
colorTransformer.greenMultiplier = 1/5;
colorTransformer.blueMultiplier = 1/3;
selectedItm.transform.colorTransform = colorTransformer;
But I dont know how obtain a Sepia or a Black and White effect. Is there a function to do this ? If not is there some kind of database which contains "multiplier" to obtains effect ?
You'll have to explore to fine tune a sepia filter:
var sepia = new flash.filters.ColorMatrixFilter();
sepia.matrix = [0.3930000066757202, 0.7689999938011169,
0.1889999955892563, 0, 0, 0.3490000069141388,
0.6859999895095825, 0.1679999977350235, 0, 0,
0.2720000147819519, 0.5339999794960022,
0.1309999972581863, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1];
Online color transform generators can help for real time tuning:
Online matrix generator:
http://www.onebyonedesign.com/flash/matrixGenerator/
Is there an easy way to grey out a sprite? I'm disabling a button, and I know how to do that, but wants to convey that in the GUI.
You can apply the ColorMatrixFilter to your Sprite with the approximate values that makes color greyscaled.
sprite.filters = [ new ColorMatrixFilter([0.3086, 0.6094, 0.0820, 0, 0, 0.3086, 0.6094, 0.0820, 0, 0, 0.3086, 0.6094, 0.0820, 0, 0, 0, 0, 0, 1, 0]) ];
I'm drawing stuff on a bitmapData and I need to continuously fade every pixel to 0x808080 while still drawing (its for a DisplacementMapFilter)...
I think this illustrates my problem:
http://www.ventdaval.com/lab/grey.swf
The simpler approach I tried was drawing a semi-transparent grey box on it, but it never reaches a single color (i.e. 0x808081 will never be turned to 0x808080)... The same kind of thing happens with a ColorMatrixFilter trying to progressively reduce the saturation and/or contrast. (the example above is applying a filter with -10 contrast every frame).
I'm trying paletteMap now, and I'm sensing this could be the way to go, but I haven't been able to get it... any ideas?
You can try to fade it slightly more than you are fading it now, so color will go to 0x808080, you just need to do some calculations.
Yes, you can do this with paletteMap.
The third way will be to write PixelBender shader for it.
You can also use your normal fading and do paletteMap or PixelBender one once in a few frames, to speed-up all this.
I think the easiest way to do this would be with two successive color filters. That is:
var n:Number = 0.9;
var off:Number = 0x80;
var filter:ColorMatrixFilter = new ColorMatrixFilter( [
1, 0, 0, 0, -off,
0, 1, 0, 0, -off,
0, 0, 1, 0, -off,
0, 0, 0, 1, -off ] );
var filter2:ColorMatrixFilter = new ColorMatrixFilter( [
n, 0, 0, 0, off,
0, n, 0, 0, off,
0, 0, n, 0, off,
0, 0, 0, n, off ] );
function onFrame( e:Event ) {
myBMD.applyFilter( myBMD, myBMD.rect, new Point(), filter );
myBMD.applyFilter( myBMD, myBMD.rect, new Point(), filter2 );
}
The first filter offsets each channel value downwards by 128 - turning your gray-based image into a black-based image. The second filter multiplies each channel value by the modulator (0.9 in my example), and then offsets the values back up by 128.
I wound up solving this by filling the texture with 0xFF808080 every frame, then drawing my dynamic stuff to a second, transparent bitmap, doing a colortransform on it with a lower alpha multiplier (say 0.98), and then copypixeling that bitmap to the main bitmap with mergealpha on. Works a treat:
public function update():void
{
lock();
fillRect(rect, 0xFF808080);
drawTarget.lock();
drawTarget.colorTransform(rect, fadeTransform);
drawTarget.applyFilter(drawTarget, rect, pt, blurFilter);
drawTarget.unlock();
copyPixels(drawTarget, rect, pt, null, null, true);
unlock();
}