canvas+webgl实现三维神庙教堂内效果代码-html代码-BFW代码库

canvas+webgl实现三维神庙教堂内效果代码

代码语言：html

所属分类：三维

代码描述：canvas+webgl实现三维神庙教堂内效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
<style>
body { margin: 0; overflow: hidden; }
</style>


  
</head>

<body translate="no">
  <canvas id="myCanvas"></canvas>
  
      <script >
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl2');

const vertexShaderSource = `#version 300 es

in vec2 a_position;

void main() {
    gl_Position = vec4(a_position, 0.0, 1.0);
}
`;

const fragmentShaderSource = `#version 300 es

precision highp float;

uniform vec2 iResolution; // Declare as vec2 (canvas width and height)
uniform vec2 iMouse;
uniform float iTime;

out vec4 fragColor;

// Shadertoy code here

#define PI 3.14159265359
#define RES iResolution
#define PT iMouse
#define smin smoothmin
#define smax smoothmax

float d0 = 120.;

// Signed distance function for a plane
float sdPlane(vec3 p, vec3 n, float h) {
  return dot(p, n) + h;
}

float sdCylinder(vec3 p, in float r, in float h, in int hAxis) {
  vec2 aR, aH;

  if (hAxis == 0) { // x-axis
    aR = p.yz, aH = vec2(p.x, 0.0);
  } else if (hAxis == 1) { // y-axis
    aR = p.xz, aH = vec2(p.y, 0.0);
  } else { // z-axis
    aR = p.xy, aH = vec2(p.z, 0.0);
  }

  vec2 d = vec2(length(aR) - r, abs(aH.x) - h / 2.0);

  // Return the distance to the cylinder
  return min(max(d.x, d.y), 0.0) + length(max(d, 0.0));
}

float sdCuboid(vec3 p, vec2 a, float h) {
  vec3 d = abs(p) - vec3(a.x, h, a.y);
  return length(max(d, 0.0)) + min(max(d.x, max(d.y, d.z)), 0.0);
}

float sdSphere(vec3 p, float r) {
  return length(p) - r;
}

float smoothmin(float d1, float d2, float k) {
  .........完整代码请登录后点击上方下载按钮下载查看