canvas+webgl实现360度全景环境镜面反射不锈钢球体效果代码
代码语言:html
所属分类:三维
代码描述:canvas+webgl实现360度全景环境镜面反射不锈钢球体效果代码
代码标签: canvas webgl 360 全景 环境 镜面 反射 不锈钢 球体
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> </head> <body translate="no"> <script > const canvas = document.createElement("canvas"); const gl = canvas.getContext("webgl2"); document.title = "🤖"; document.body.innerHTML = ""; document.body.appendChild(canvas); document.body.style = "margin:0;touch-action:none;overflow:hidden;"; canvas.style.width = "100%"; canvas.style.height = "auto"; canvas.style.userSelect = "none"; const dpr = Math.max(1, window.devicePixelRatio); function resize() { const { innerWidth: width, innerHeight: height } = window; canvas.width = width * dpr; canvas.height = height * dpr; gl.viewport(0, 0, width * dpr, height * dpr); } window.onresize = resize; function createCubeMap() { const cubeMap = gl.createTexture(); gl.bindTexture(gl.TEXTURE_CUBE_MAP, cubeMap); const imgpath = '//repo.bfw.wiki/bfwrepo/images/360'; const faces = [ [gl.TEXTURE_CUBE_MAP_POSITIVE_X, 'posx.jpg'], [gl.TEXTURE_CUBE_MAP_NEGATIVE_X, 'negx.jpg'], [gl.TEXTURE_CUBE_MAP_POSITIVE_Y, 'posy.jpg'], [gl.TEXTURE_CUBE_MAP_NEGATIVE_Y, 'negy.jpg'], [gl.TEXTURE_CUBE_MAP_POSITIVE_Z, 'posz.jpg'], [gl.TEXTURE_CUBE_MAP_NEGATIVE_Z, 'negz.jpg']]; for (let [target, url] of faces) { const level = 0; const internalFormat = gl.RGBA; const width = 512; const height = 512; const format = gl.RGBA; const type = gl.UNSIGNED_BYTE; gl.texImage2D(target, level, internalFormat, width, height, 0, format, type, null); const image = new Image(); image.crossOrigin = 'anonymous'; image.onload = () => { gl.bindTexture(gl.TEXTURE_CUBE_MAP, cubeMap); gl.texImage2D(target, level, internalFormat, format, type, image); }; image.src = `${imgpath}/${url}?width=512&height=512&format=auto`; } gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.NEAREST); } const vertexSource = `#version 300 es #ifdef GL_FRAGMENT_PRECISION_HIGH precision highp float; #else precision mediump float; #endif in vec4 position; void main(void) { gl_Position = position; } `; const fragmentSource = `#version 300 es /********* * made by Matthias Hurrle (@atzedent) */ #ifdef GL_FRAGMENT_PRECISION_HIGH precision highp float; #else precision mediump float; #endif out vec4 O; uniform vec2 resolution; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0