Any Webgl Community? Plus Webgl Studio

[lv2lrn4lf]

You know any other webgl community? And Have you seen webgl studio before?

https://github.com/jagenjo/webglstudio.js

I want to learn it and do cool things in it but it does not have alot of learning materiel on it so i'm hoping to gather people and make them open a discussion area or drag people here to build a community so i can learn better... cause this does have a community it just not establish... indirectly you are a fan yourself of this software.

Can you take this and make it render and instruct me on how you did it? I tried a few but having trouble.. still a beginner:

var last_c = 0;
function rand_color(v) { 
  for(var i = 0; i < 3; i++)
  	v[i] = Math.sin(last_c*0.01+i)*0.5+0.5;
  v[3] = 0.5;
  last_c+=1;
}

//create a mesh
var mesh = GL.Mesh.sphere({size:10, subdivisions:50, wireframe:true});
var color_buffer = mesh.createVertexBuffer("colors");
color_buffer.forEach( rand_color ).upload();


//create a shader
var vs_code = '''
	precision highp float;
	attribute vec3 a_vertex;
	attribute vec4 a_color;
	varying vec4 v_color;
	uniform mat4 u_mvp;
	uniform float u_pointSize;
	void main()
  {
    v_color = a_color;
    gl_Position = u_mvp * vec4(a_vertex,1.0);
    gl_PointSize = u_pointSize * 100.0 / gl_Position.z;
  }
''';

var fs_code = '''
	precision highp float;
	varying vec4 v_color;
	uniform vec4 u_color;
	varying vec2 iResolution;
	uniform float iTime;
	vec2 iResolution = vec2(1,1);
	/*void main()
  {
    float f = 1.0 - length(gl_PointCoord.xy - vec2(0.5));
    f = pow(f,5.5) * 5.0;
    //f = max(0.0,smoothstep(0.2,0.5,f));
    gl_FragColor = u_color * v_color * f;
  }*/

// Star Nest by Pablo Roman Andrioli


/*
#define iterations 17
#define formuparam 0.53

#define volsteps 20
#define stepsize 0.1

#define zoom   0.800
#define tile   0.850
#define speed  0.010 

#define brightness 0.0015
#define darkmatter 0.300
#define distfading 0.730
#define saturation 0.850*/


//void mainImage( out vec4 fragColor, in vec2 fragCoord )
void main()
{
	//get coords and direction
	vec2 uv=fragCoord.xy/iResolution.xy-.5;
	uv.y*=iResolution.y/iResolution.x;
	vec3 dir=vec3(uv*zoom,1.);
	float time=iTime*speed+.25;

	//mouse rotation
	float a1=.5+iMouse.x/iResolution.x*2.;
	float a2=.8+iMouse.y/iResolution.y*2.;
	mat2 rot1=mat2(cos(a1),sin(a1),-sin(a1),cos(a1));
	mat2 rot2=mat2(cos(a2),sin(a2),-sin(a2),cos(a2));
	dir.xz*=rot1;
	dir.xy*=rot2;
	vec3 from=vec3(1.,.5,0.5);
	from+=vec3(time*2.,time,-2.);
	from.xz*=rot1;
	from.xy*=rot2;
	
	//volumetric rendering
	float s=0.1,fade=1.;
	vec3 v=vec3(0.);
	for (int r=0; r<volsteps; r++) {
		vec3 p=from+s*dir*.5;
		p = abs(vec3(tile)-mod(p,vec3(tile*2.))); // tiling fold
		float pa,a=pa=0.;
		for (int i=0; i<iterations; i++) { 
			p=abs(p)/dot(p,p)-formuparam; // the magic formula
			a+=abs(length(p)-pa); // absolute sum of average change
			pa=length(p);
		}
		float dm=max(0.,darkmatter-a*a*.001); //dark matter
		a*=a*a; // add contrast
		if (r>6) fade*=1.-dm; // dark matter, don't render near
		//v+=vec3(dm,dm*.5,0.);
		v+=fade;
		v+=vec3(s,s*s,s*s*s*s)*a*brightness*fade; // coloring based on distance
		fade*=distfading; // distance fading
		s+=stepsize;
	}
	v=mix(vec3(length(v)),v,saturation); //color adjust
	gl_FragColor = vec4(v*.01,1.);	
	
}
''';

var shader = new GL.Shader(vs_code,fs_code);
console.log("shader:",shader);
//get variable location
var iTimeFLoc = gl.getUniformLocation(shader.program, "iTime");

//create uniforms
var color = this.color = vec4.fromValues(1,1,1,1);
this.point_size = 4;
this["@color"] = { type:"color" };
var mvp = mat4.create();

//render callback
this.render = function(options)
{

  var camera = options.current_camera;
  var model = node.transform.getGlobalMatrix();
  camera.getModelViewProjectionMatrix( model, mvp );
  gl.enable(gl.BLEND);
  gl.disable( gl.DEPTH_TEST );
  gl.blendFunc(gl.SRC_ALPHA,gl.ONE);
  shader.uniforms({u_mvp:mvp, u_color: color, u_pointSize: this.point_size }).draw(mesh,gl.POINTS,null);
  gl.enable( gl.DEPTH_TEST );
}

var temp = vec3.create();

this.rho = 28;
this.sigma = 10;
this.beta = 8/3.;
this.st = 0.1;  

//force refresh
this.update = function(dt)
{
  gl.uniform1f(iTimeFLoc, dt);
	var rho = this.rho, sigma = this.sigma, beta = this.beta, st = this.st;  
  var buffer = mesh.getBuffer("vertices");
  var time = Scene.getTime();
  dt *= st;
  buffer.forEach( function(v) { 
				temp[0] = sigma*(v[1] - v[0]) * dt ;
				temp[1] = (v[0] * (rho - v[2]) - v[1]) * dt;
				temp[2] = (v[0] * v[1] - beta * v[2]) * dt;
				vec3.add(v, v, temp); //apply delta movement    
  });
  buffer.upload(gl.STREAM);
  
  Scene.refresh();
}

check out the code i paste the link feature isn't working.

[lv2lrn4lf]

Here a code pen, I got it partially working but not fully. I switch to using threejs but i do plan to bring this into webgl studio for streaming purpose. https://jsfiddle.net/lv2lrn4lf/ck9tqapu/3/

[greggman]

I'm sorry, I don't know of any WebGL communities. Maybe reddit or the webgl-dev-list? And the Khronos group forum

[lv2lrn4lf]

if you interested here I manage to get it a little closer but not exactly

https://jsfiddle.net/lv2lrn4lf/ck9tqapu/3/

here what i'm trying to convert into js:

https://www.shadertoy.com/view/XlfGRj#

If you may know what I'm doing wrong just by briefly skimming the code, I would appreciate it.

The biggest thing is just variable converting, but i could just be over looking something simple.

[greggman]

A lot of nit picking with the style and the fact that you're using r88 where as current three.js is at r140 but in any case the issue is this

vec2 uv=v_fragCoord.xy / u_resolution.xy -.5;

The original code expected fragCoord.xy in pixels and is converting to a value from 0 to 1 but v_fragCoord.xy already goes from 0 to 1

vec2 uv=v_fragCoord.xy -.5;

https://jsgist.org/?src=97eaa5bb54c704a75fd6c40fb9cb39c4

see: https://threejs.org/manual/#en/shadertoy

[lv2lrn4lf]

I change the line of code in my fiddle and I can see a big different and are you going to put the shader you converted on the site? Can we have a section for user to submit webgl jsgist like the one you did? Things like this help people really understand when they have stuff to play with and a place to share. Now i'mma just take your js gist and try to put it in webglstudio and if I am able to do so, I will post the result here so you can see too. Also check out webglstudio.org/demo is the editor if you haven't! And thanks for the reference to threejs shadertoy link.