PixelsCommander/HTML-GL

Get as many FPS as you need by rendering HTML/CSS in WebGL

jacobus-brogly

@jacobus-brogly

can someone re-post the link, thanks)

Denis Radin

@PixelsCommander

You may check out this post http://pixelscommander.com/interactive-revolution/glsl-web-components-webgl/ which is introductary one and http://thebookofshaders.com/

jacobus-brogly

@jacobus-brogly

hi Denis, thanks

I am working via a packt book ,

"beginning webgl for html5" apress publishing (Brian Danchilla)

for a noob like me its really a good book explaining all things from basic

jacobus-brogly

@jacobus-brogly

why is pointsize not working here?

http://codepen.io/jacobBogers/pen/WRozjB

if I put in gl_PointSize = 0.5;

gl.drawArrays(gl.POINTS, 0, 6);

this works though

gl.drawArrays(gl.TRIANGLES, 0, 6);

gl.drawArrays(gl.LINES, 0, 6);

any assistance is appreceated

can anyone make it work for points?

thank you

Denis Radin

@PixelsCommander

add gl_PointSize = 10.0; to vertex shader and change draw mode to gl.drawArrays(gl.POINTS, 0, 6); in JS

then if you need them to be round - use fragment shader to discard / blackout pixels which are out of radius

jacobus-brogly

@jacobus-brogly

hi @PixelsCommander

I see in webgl textures are mapped to [0,1]x[0,1] i guess this is regardless of the fact the texture is an exact square or not

I want to create a convolution filter in the code samples I have seen so far they calculate the texel size with highp vec2 texelSize = vec2(1.0, 1.0) / uTexDimensions;

i uTextDimensions being a vec2 attribute with the Texture width and height

jacobus-brogly

@jacobus-brogly

this is the only way??? I can imagine rounding errors in highp (if it is a large pic) me picking up the wrong pixel (texel), is there a way to get pixels from the texture??

jacobus-brogly

@jacobus-brogly

my first webgl shader , calculated the projection matrix myself (using simple optics formula)

jacobus-brogly

@jacobus-brogly

@PixelsCommander thank you for assisting me with previous question,

jacobus-brogly

@jacobus-brogly

i am a bit stuck

http://relativity.net.au/gaming/glsl/Built-inCommonFunctions.html

explains mod in Shader

genType mod(genType α, float β) 

genType mod(genType α, genType β)

and genType is ivec, float , whatever

BUT

this works

float r = mod (4.0 , 2.0 );

jacobus-brogly

@jacobus-brogly

this doesn't work

int r = mod (4 , 2 );

why is that?

jacobus-brogly

@jacobus-brogly

 ivec2 p = ivec2(3,4);
    ivec2 r = mod ( p, 2.0 );

jacobus-brogly

@jacobus-brogly

this does work

 vec2 p = vec2(3.0, 4.0);
    vec2 r = mod ( p, 2.0 );

the documentation is worthless why doesnt it specify genType when ivec clearly doesnt work

jacobus-brogly

@jacobus-brogly

hola

is there a website where I can check if my graphic card is webgl 2 compliant?

well I mean my graphic-card/driver/combo

Meai1

@Meai1

So the point of this is to add effects ? I mean regular html works overlaid anyway right?

Denis Radin

@PixelsCommander

@Meai1 no, actually if you use velocity.js from vendor folder actual dom elements are not animated, they stay still so do not consume resources.

Meai1

@Meai1

Denis, what are you talking about? I meant what the general usecase of htmlgl is

Denis Radin

@PixelsCommander

General usecases are 60FPS animations and special effects you can get with GLSL. They were explicitly stated in repository description and article http://pixelscommander.com/web-applications-performance/render-html-css-in-webgl-to-get-highest-performance-possibl/

https://github.com/PixelsCommander/HTML-GL

Where communities thrive

People

Repo info

Activity