nidza-test/js/shader-inline.js

Test instance for nidza.js

import {Nidza, Utility} from "nidza";
// import {Nidza, Utility} from "../node_modules/nidza/index";

window.addEventListener("load", function(e) {
  loader.innerText = "NIDZA READY";
  setTimeout(function() {
    loader.style.display = "none";
  }, 200);
});


var nidza = new Nidza();

let myShader = {
  id: "myShader",
  size: {
    width: window.innerWidth,
    height: window.innerHeight,
  },
  parentDom: document.getElementById("testHolder"),
};

var indentityMyShader = nidza.createNidza3dIndentity(myShader);

let myShaderElement = indentityMyShader.addShaderComponentCustom({
  id: "vertex-color-comp",
});

myShaderElement.initDefaultFSShader = () => {
  return `
  precision mediump float;
  uniform vec4 I;
  Q Z(Q p,float a) {
    return Q(cos(a)*p.y+sin(a)*p.x,cos(a)*p.x-sin(a)*p.y,p.z);
  }
  float F(Q P) {
    float R=`+r+`, S=`+s+`;
    vec4 p=vec4(P,1), o=p, s=vec4(S,S,S,abs(S))/R;
    for (int i = 0;i < 10;i++) {
      if(i==3||i==7)R=`+r2+`,S=`+s2+`;
      p.xyz=clamp(p.xyz,-.5,2.)*2.-p.xyz;
      float r2=dot(p.xyz,p.xyz);
      if (r2 > 10000.)break;p=p*clamp(max(R/r2,R)*cos(I.x),0.,1.)*s+o;
    } return ((length(p.xyz)-abs(S-1.))/p.w-pow(abs(S),float(1-24)));
  }
  float D(Q p) {
    Q c=Q(10.,10.,8.);
    p=mod(p,c)-.5*c;
    Q q=abs(Z(p,p.z*3.1415/20.*4.));
    float d2=max(q.z-10.,max((q.x*0.866025+q.y*0.5),q.y)-.01);
    p=Z(p,p.z*3.1415/10.*(length(p.xy)-3.)*`+spin+`);
    return max(F(p),-d2);
  }
  Q R(Q p,Q d) {
    float td=0.,rd=0.;
    for(int i=0;i<80;i++) {
      if((rd=D(p))<pow(td,1.5)*.004) break;td+=rd;p+=d*rd;
    }
    float md=D(p),e=.0025;
    Q n=normalize(Q(D(p+Q(e,0,0))-D(p-Q(e,0,0)),D(p+Q(0,e,0))-D(p-Q(0,e,0)),D(p+Q(0,0,e))-D(p-Q(0,0,e))));
    e*=.5;
    float occ=`+occ+`;
    occ=clamp(occ,0.,1.);
    float br=`+br+`;
    float fog=`+fog+`;
    return mix(Q(`+color+`),Q(0.,0.,0.),1.-fog);
  }
  void main(void) {
    `+vec_f+` `+q_d+` `+q_c+` `+gl_FragColor+
  `}`;
}

myShaderElement.initDefaultVSShader = () => {
  return `
  attribute vec2 P;
  void main(void) {
    gl_Position=vec4(P,0.,1.);
  }`
}

myShaderElement.initDefaultBuffers = function() {
  var gl = this.gl;
};

// Start
var sp = myShaderElement.gl.createProgram();
var g = myShaderElement.gl;

var c = indentityMyShader.canvasDom;

// move it intro lib
function gs(t, s) {
  g.shaderSource(t = g.createShader(t), s);
  g.compileShader(t); g.attachShader(sp, t);
}

// Params
var camera_ori_y = "120.";
var camera_ori_x = "120.";
var direction_x = "5.";
var direction_y = "5.";
var direction_z = "I.x*30.2434216";

var spin = "(I.x / p.z)"; 
// default: sin(I.x*.01)*.2

var r = "(tan((I.x*1.15*sin(I.x))*3.176)*P.z)*0.007"// "((((I.x*1.15*sin(I.x))*3.276))*0.007)+0.0001432";
// (tan((I.x*1.15*sin(I.x))*3.176)*P.z)*0.007

var s = " 3.4312-cos(I.x*2.1)+0.05"// "(3.4312-tan(I.x*((I.x)/.41))+1.05)-0.0001234";
// 3.4312-cos(I.x*2.1)+0.05

var r2 = "sin((I.x+float(i)*0.0001*sin(I.x*.01))*3.176)*(0.3)+0.5" //  "((((tan(I.x)*1.05*tan(I.x))*2.176))*0.007)-0.00001";
// sin((I.x+float(i)*0.0001*sin(I.x*.01))*3.176)*(0.3)+0.5

var s2 = "9.14312-cos(I.x+(tan(I.x)/.4))+0.105";
// 3.4312-sin(I.x*200.1)+(I.x)*sin(float(i))+0.5

var occ = "1.+(D(p+n*.02+Q(-e,0,0))+D(p+n*.02+Q(+e,0,0))+D(p+n*.02+Q(0,-e,0))+D(p+n*.02+Q(0,e,0))+D(p+n*.02+Q(0,0,-e))+D(p+n*.02+Q(0,0,e))-.03)*20.";
var br = "(pow(clamp(dot(n,-normalize(d+Q(.3,.3,.3)))*.6+.4, 0.,1.),1.7)*.8+.2)*occ/(td*.5+1.)";
var fog = "clamp(3./(td*td*1.8+.4),0.,1.)";
var color = "br/(td+1.),br/(td+1.),br/(td+1.)";

// Main

var vec_f = "vec2 f = gl_FragCoord.xy;";
var q_d = "Q d = Q((f - vec2("+camera_ori_y+","+camera_ori_x+") ) / " + camera_ori_x + ", 1.);";
var q_c = "Q c = pow(R(Q("+direction_x+","+direction_y+","+direction_z+"),normalize(d*Q(1.,1.,1.-(length(d.xy)*.54)))),Q(.5,.5,.5));";
var gl_FragColor = "gl_FragColor=vec4(pow(floor(c*Q(8.,8.,8.)+fract(f.x/4.+f.y/2.)/2.)/(Q(7.,7.,7.)),Q(1.5,1.5,1.5)),1.);";

var fcShader = myShaderElement.initDefaultFSShader();

gs(35633, myShaderElement.initDefaultVSShader());
gs(35632, fcShader.split("Q").join("vec3"));

g.linkProgram(sp);
g.useProgram(sp);

var i, u, W, H;

g.bindBuffer(34962, g.createBuffer());
g.bufferData(34962, new Float32Array([i=-1,i,i,1,1,i,1,1]), 35044);
g.vertexAttribPointer(0, 2, 5126, 0, 0, 0);
g.enableVertexAttribArray(0);

(u = function(t) {
  W=innerWidth;
  H=innerHeight;
  s=(H/240)|0;
  g.viewport(0,0,c.width,c.height);
  g.uniform4f(g.getUniformLocation(sp,"I"),(t-30000)*.00002,0,0,0);
  g.drawArrays(5,0,4);
  requestAnimationFrame(u);
})(0);

/*
dispatchEvent(
  new CustomEvent(indentityMyShader.getKey("activate-updater"), {
    detail: {
      id: "vertex-color-comp",
    },
  })
); */

// Make it global
window.myShaderElement = myShaderElement;
window.indentityMyShader = indentityMyShader;