WebGL Canvas 3D迷宫实验

OpenGL GLSL Fragment with abstractors based on pi to two decimals. Source: 1. https://www.shadertoy.com/view/Xds3zN 2. http://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm

webgl

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 1366
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var quality = 1.0;

var canvas, gl, buffer, program, vertexPosition, screenVertexPosition,
    parameters = {
        startTime: Date.now(),
        time: 0,
        screenWidth: 0,
        screenHeight: 0
    },
    surface = {
        centerX: 0,
        centerY: 0,
        width: 1,
        height: 1
    },
    frontTarget, backTarget, resizer = {};

init();
if (gl) {
    animate();
}

function init() {

canvas = document.createElement('canvas');
    document.body.appendChild(canvas);

try {
        gl = canvas.getContext('experimental-webgl', {
            preserveDrawingBuffer: true
        });
    } catch (error) {}

if (!gl) {

alert("WebGL not supported");

} else {

// Create vertex buffer (2 triangles)

buffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-3.14, -3.14, 8.14, -8.14, -3.14, 9.145, 3.14, -3.14, 3.14, 1.0, -1.0, 1.0]), gl.STATIC_DRAW);

// Create surface buffer (coordinates at screen corners)

surface.buffer = gl.createBuffer();
    }

onWindowResize();
    window.addEventListener('resize', onWindowResize, false);

compileProgram();

}

function computeSurfaceCorners() {

if (gl) {

surface.width = surface.height * parameters.screenWidth / parameters.screenHeight;

var halfWidth = surface.width * 0.5,
            halfHeight = surface.height * 0.5;

gl.bindBuffer(gl.ARRAY_BUFFER, surface.buffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
            surface.centerX - halfWidth, surface.centerY - halfHeight,
            surface.centerX + halfWidth, surface.centerY - halfHeight,
            surface.centerX - halfWidth, surface.centerY + halfHeight,
            surface.centerX + halfWidth, surface.centerY - halfHeight,
            surface.centerX + halfWidth, surface.centerY + halfHeight,
            surface.centerX - halfWidth, surface.centerY + halfHeight
        ]), gl.STATIC_DRAW);

}

function resetSurface() {

surface.centerX = surface.centerY = 0;
    surface.height = 1;
    computeSurfaceCorners();

}

function compileProgram() {

if (!gl) {
        return;
    }

program = gl.createProgram();
    var fragment = document.getElementById('fragmentShader').textContent;
    // var vertex = document.getElementById( 'vertexShader' ).textContent;
    var vertex = document.getElementById('surfaceVertexShader').textContent;

var vs = createShader(vertex, gl.VERTEX_SHADER);
    var fs = createShader(fragment, gl.FRAGMENT_SHADER);

gl.attachShader(program, vs);
    gl.attachShader(program, fs);

gl.deleteShader(vs);
    gl.deleteShader(fs);

gl.linkProgram(program);

if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
        console.error('VALIDATE_STATUS: ' + gl.getProgramParameter(program, gl.VALIDATE_STATUS), 'ERROR: ' + gl.getError());
        return;
    }

gl.useProgram(program);

cacheUniformLocation(program, 'time');
    cacheUniformLocation(program, 'resolution');
    cacheUniformLocation(program, 'texture');

screenVertexPosition = gl.getAttribLocation(program, "position");
    gl.enableVertexAttribArray(screenVertexPosition);

}

function cacheUniformLocation(program, label) {

if (program.uniformsCache === undefined) {
        program.uniformsCache = {};
    }

program.uniformsCache[label] = gl.getUniformLocation(program, label);

}

function createTarget(width, height) {

var target = {};

target.framebuffer = gl.createFramebuffer();
    target.renderbuffer = gl.createRenderbuffer();
    target.texture = gl.createTexture();

// set up framebuffer

gl.bindTexture(gl.TEXTURE_2D, target.texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);

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);

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);

gl.bindFramebuffer(gl.FRAMEBUFFER, target.framebuffer);
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, target.texture, 0);

// set up renderbuffer

gl.bindRenderbuffer(gl.RENDERBUFFER, target.renderbuffer);

gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, width, height);
    gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, target.renderbuffer);

// clean up

gl.bindTexture(gl.TEXTURE_2D, null);
    gl.bindRenderbuffer(gl.RENDERBUFFER, null);
    gl.bindFramebuffer(gl.FRAMEBUFFER, null);

return target;

}

function createRenderTargets() {

frontTarget = createTarget(parameters.screenWidth, parameters.screenHeight);
    backTarget = createTarget(parameters.screenWidth, parameters.screenHeight);

}

function createShader(src, type) {

var shader = gl.createShader(type);
    var line, lineNum, lineError, index = 0,
        indexEnd;

gl.shaderSource(shader, src);
    gl.compileShader(shader);

return shader;

}

function onWindowResize(event) {

var isMaxWidth = ((resizer.currentWidth === resizer.maxWidth) || (resizer.currentWidth === resizer.minWidth)),
        isMaxHeight = ((resizer.currentHeight === resizer.maxHeight) || (resizer.currentHeight === resizer.minHeight));

resizer.isResizing = false;
    resizer.maxWidth = window.innerWidth - 75;
    resizer.maxHeight = window.innerHeight - 125;
    if (isMaxWidth || (resizer.currentWidth > resizer.maxWidth)) {
        resizer.currentWidth = resizer.maxWidth;
    }
    if (isMaxHeight || (resizer.currentHeight > resizer.maxHeight)) {
        resizer.currentHeight = resizer.maxHeight;
    }
    if (resizer.currentWidth < resizer.minWidth) {
        resizer.currentWidth = resizer.minWidth;
    }
    if (resizer.currentHeight < resizer.minHeight) {
        resizer.currentHeight = resizer.minHeight;
    }

canvas.width = window.innerWidth / quality;
    canvas.height = window.innerHeight / quality;

canvas.style.width = window.innerWidth + 'px';
    canvas.style.height = window.innerHeight + 'px';

parameters.screenWidth = canvas.width;
    parameters.screenHeight = canvas.height;

computeSurfaceCorners();

if (gl) {

gl.viewport(0, 0, canvas.width, canvas.height);

createRenderTargets();

}
}

function animate() {
    requestAnimationFrame(animate);
    render();
}

function render() {

if (!program) {
        return;
    }

parameters.time = Date.now() - parameters.startTime;

// Set uniforms for custom shader

gl.useProgram(program);

gl.uniform1f(program.uniformsCache['time'], parameters.time / 200);
    gl.uniform2f(program.uniformsCache['resolution'], parameters.screenWidth, parameters.screenHeight);
    gl.uniform1i(program.uniformsCache['backbuffer'], 0);
    gl.uniform2f(program.uniformsCache['surfaceSize'], surface.width, surface.height);

gl.bindBuffer(gl.ARRAY_BUFFER, surface.buffer);
    gl.vertexAttribPointer(surface.positionAttribute, 2, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.vertexAttribPointer(vertexPosition, 2, gl.FLOAT, false, 0, 0);

gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, backTarget.texture);

// Render custom shader to front buffer

gl.bindFramebuffer(gl.FRAMEBUFFER, frontTarget.framebuffer);

gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES, 50, 99);

// Set uniforms for screen shader

gl.useProgram(program);

gl.uniform2f(program.uniformsCache['resolution'], parameters.screenWidth, parameters.screenHeight);
    gl.uniform1i(program.uniformsCache['texture'], 1);

gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.vertexAttribPointer(screenVertexPosition, 2, gl.FLOAT, false, 0, 0);

// Render front buffer to screen

gl.bindFramebuffer(gl.FRAMEBUFFER, null);

gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES, 0, 6);

// Swap buffers

}

编译

CSS

HTML

uniform float time;
  uniform vec2 resolution;

vec3 opRep( vec3 p )
  {
    vec3 c = vec3( 0.0, 1.0, 1.0 );
    return mod(p,c)-0.5*c;
  }

float sdBox( vec3 p, vec3 b )
  {
    vec3 d = abs(p) - b;
    return min(max(d.x,max(d.y,d.z)),0.0) + length(max(d,0.0));
  }

vec2 opU( vec2 d1, vec2 d2 )
  {
    return (d1.x<d2.x) ? d1 : d2;
  }

float opS( float d1, float d2 )
  {
    return max(-d1,d2);
  }

vec3 opTwist( vec3 p )
  {
      float  c = cos(00.1*p.z + time*0.2);
      float  s = sin(00.3*p.z + time*0.2);
      mat2   m = mat2(c,-s,s,c);
      return vec3(m*p.xy,p.z);
  }

vec2 map( in vec3 pos )
  {
      //float box = sdBox( pos-vec3( 0.0,0.1, 0.0), vec3(0.29, 0.09, 0.29) );
      float box = sdBox( opRep( opTwist(pos-vec3(0.0, 0.0, 0.0)) ), vec3(0.29, 0.09, 0.29) );
      //float innerbox = sdBox( pos-vec3( 0.0, 0.1, 0.0), vec3(0.17, 0.1, 0.17) );
      float innerbox = sdBox( opRep( opTwist(pos-vec3( 0.0, 0.0, 0.0)) ), vec3(0.17, 0.2, 0.17) );
      
      float logo = opS( innerbox, box );
      
      //res = opU( res, vec2( logo, 14.0 ) );
      vec2 res = vec2( logo, 0.0 );
      return res;
  }

vec3 calcNormal( in vec3 pos )
  {
      vec3 eps = vec3( 0.001, 0.0, 0.0 );
      vec3 nor = vec3(
          map(pos+eps.xyy).x - map(pos-eps.xyy).x,
          map(pos+eps.yxy).x - map(pos-eps.yxy).x,
          map(pos+eps.yyx).x - map(pos-eps.yyx).x );
      return normalize(nor);
  }

vec2 castRay( in vec3 ro, in vec3 rd, in float maxd )
  {
      float precis = 0.001;
      float h=precis*2.0;
      float t = 0.0;
      float m = -1.0;
      for( int i=0; i<60; i++ )
      {
          if( abs(h)<precis||t>maxd ) continue;//break;
          t += h;
          vec2 res = map( ro+rd*t );
          h = res.x;
          m = res.y;
      }

if( t>maxd ) m=-1.0;
      return vec2( t, m );
  }

vec3 render( in vec3 ro, in vec3 rd )
  { 
      vec3 col = vec3(1.0);
      vec2 res = castRay(ro,rd,20.0);
      float t = res.x;
      float m = res.y;

vec3 pos = ro + t*rd;
      vec3 nor = calcNormal( pos );

vec3 lig = normalize( vec3(0.0, 1.0, 0.0) );
      float dif = clamp( dot( nor, lig ), 0.0, 1.0 );
      col = col*dif;
      col *= exp( -0.01*t*t );
      return vec3( clamp(col,0.0,1.0) );
  }

void main( void )
  {
      vec2 q = gl_FragCoord.xy/resolution.xy;
      vec2 p = -1.0+2.0*q;
      p.x *= resolution.x/resolution.y;
      
      // camera 
      // vec3 ro = vec3( -0.5+1.5*cos(0.1*time), 1.0, 0.5 + 1.5*sin(0.1*time) );
      vec3 ro = vec3( 1.0*cos(0.2*time), 0.3, 1.0*sin(0.1*time) );
      //vec3 ro = vec3( 0.8, 1.0, -0.8 );
      //vec3 ta = vec3( -0.5, -0.4, 0.5 );
      vec3 ta = vec3( 0.0, 0.2, 0.0 );
        
      // camera tx
      vec3 cw = normalize( ta-ro );
      vec3 cp = vec3( 0.0, 1.0, 0.0 );
      vec3 cu = normalize( cross(cw,cp) );
      vec3 cv = normalize( cross(cu,cw) );
      vec3 rd = normalize( p.x*cu + p.y*cv + 1.5*cw );

vec3 col = render( ro, rd );

col = sqrt(sqrt( col ) );
      
      gl_FragColor = vec4(col,1.0);
  }
</script>

void main() {
    gl_Position = vec4( position, 1.0 );
  }
</script>

void main() {
    surfacePosition = surfacePosAttrib;
    gl_Position = vec4( position, 1.0 );
  }
</script>

OpenGL GLSL Fragment with abstractors based on pi to two decimals. Source: 1. https://www.shadertoy.com/view/Xds3zN 2. http://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm

webgl

编辑器支持Emmet

快捷键

OpenGL GLSL Fragment with abstractors based on pi to two decimals. Source: 1. https://www.shadertoy.com/view/Xds3zN 2. http://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm

webgl

Canvas WebGL 不规则博动的3D物体

WebGL Three.js + Cannon.js实现的3D十字关卡

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：