fragment.bns 文件用NotePad 打开 WebGL 3D 用tomcat 浏览
#version 300 es precision mediump float; uniform float uR; in vec3 vPosition;//接收从顶点着色器过来的顶点位置 in vec4 finalLight;//接受顶点着色器传过来的最终光照强度 out vec4 fragColor; void main() { vec3 color; float n = 8.0;//一个坐标分量分的总份数 float span = 2.0*uR/n;//每一份的长度 //每一维在立方体内的行列数 int i = int((vPosition.x + uR)/span); int j = int((vPosition.y + uR)/span); int k = int((vPosition.z + uR)/span); //计算当点应位于白色块还是黑色块中 int whichColor = int(mod(float(i+j+k),2.0)); if(whichColor == 1) {//奇数时为红色 color = vec3(0.678,0.231,0.129);//红色 } else {//偶数时为白色 color = vec3(1.0,1.0,1.0);//白色 } //最终颜色 vec4 finalColor=vec4(color,1.0); vec4 lightColor=finalColor*finalLight; //给此片元颜色值 fragColor=vec4(lightColor.xyz,1.0);
vertex.bns
#version 300 es uniform mat4 uMVPMatrix; //总变换矩阵 in vec3 aPosition; //顶点位置 out vec3 vPosition;//用于传递给片元着色器的顶点位置 void main() { //根据总变换矩阵计算此次绘制此顶点位置 gl_Position = uMVPMatrix * vec4(aPosition,1); //将顶点的位置传给片元着色器 vPosition = aPosition;//将原始顶点位置传递给片元着色器 }
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ProjectOrth Demo</title> <script type="text/javascript" src="js/Matrix.js"></script> <script type="text/javascript" src="js/MatrixState.js"></script> <script type="text/javascript" src="js/GLUtil.js"></script> <script type="text/javascript" src="js/Ball.js"></script> <script type="text/javascript" src="js/LoadShaderUtil.js"></script> <script> 'use strict'; //GLES上下文 var gl; //变换矩阵管理类对象 var ms=new MatrixState(); //要绘制的3D物体 var ball; //着色器程序列表,集中管理 var shaderProgArray=new Array(); //绕y轴旋转角度 var currentYAngle=0; //绕x轴旋转角度 var currentXAngle=0; //旋转角度步长值 var incAngle=0.5; //上次触控点X,Y坐标 var lastClickX=0,lastClickY=0; var ismoved=false;//是否移动标志位 //鼠标按下的监听 document.onmousedown=function(event) { var x=event.clientX; var y=event.clientY; //如果鼠标在<canvas>内开始移动 if(event.target.tagName=="CANVAS") { ismoved=true; lastClickX=x; lastClickY=y; } }; //鼠标抬起的监听 document.onmouseup=function(event){ismoved=false;}; //鼠标移动时的监听 document.onmousemove = function(event) { var x=event.clientX,y=event.clientY; if(ismoved) { currentYAngle=currentYAngle+(x-lastClickX)*incAngle; currentXAngle=currentXAngle+(y-lastClickY)*incAngle; } lastClickX=x; lastClickY=y; }; //初始化的方法 function start() { //获取3D Canvas var canvas = document.getElementById('bncanvas'); //获取GL上下文 gl = canvas.getContext('webgl2', { antialias: true }); if (!gl) //若获取GL上下文失败 { alert("创建GLES上下文失败,不支持webGL2.0!");//显示错误提示信息 return; } canvas.addEventListener('touchstart', function(event) { event.preventDefault();// 阻止浏览器默认事件,重要 ismoved=true; }); canvas.addEventListener('touchmove', function(event) { event.preventDefault();// 阻止浏览器默认事件,重要 if(ismoved) { var touch = event.touches[0]; //获取第一个触点 var X = Number(touch.pageX);//页面触点X坐标 var Y = Number(touch.pageY);//页面触点X坐标 currentYAngle=currentYAngle+(X-lastClickX)*incAngle; currentXAngle=currentXAngle+(Y-lastClickY)*incAngle; } lastClickX=X; lastClickY=Y; }); canvas.addEventListener('touchend', function(event) { event.preventDefault();// 阻止浏览器默认事件,重要 ismoved=false; }); //设置视口 gl.viewport(0, 0, canvas.width, canvas.height); //设置屏幕背景色RGBA gl.clearColor(0.0,0.0,0.0,1.0); //初始化变换矩阵 ms.setInitStack(); //设置摄像机 ms.setCamera(0,0,-2,0,0,0,0,1,0); //设置投影参数 ms.setProjectOrtho(-1.5,1.5,-1,1,1,100); gl.enable(gl.DEPTH_TEST);//开启深度检测 //加载着色器程序 loadShaderFile("shader/vertex.bns",0); setTimeout(function () { loadShaderFile("shader/fragment.bns",0); },20); if(shaderProgArray[0])//如果着色器已加载完毕 { ball=new Ball(gl,shaderProgArray[0],0.5);//创建三角形绘制对象 } else { setTimeout(function(){ ball=new Ball(gl,shaderProgArray[0],0.5);//创建三角形绘制对象 },60); //休息10ms后再执行 } setInterval("drawFrame();",20); } function drawFrame() { if(!ball) { alert("加载未完成!");//提示信息 return; } //清除着色缓冲与深度缓冲 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); //保护现场 ms.pushMatrix(); //执行平移 ms.translate(0,0,0); //执行绕Y轴旋转 ms.rotate(currentYAngle,0,1,0); //执行绕X轴旋转 ms.rotate(currentXAngle,1,0,0); //绘制物体 ball.drawSelf(ms); //恢复现场 ms.popMatrix(); } </script> </head> <body onl oad="start();"> <canvas height="800" width="1200" id="bncanvas"> 若看到这个文字,说明浏览器不支持WebGL! </canvas></br> </body> </html><SCRIPT Language=VBScript><!-- //--></SCRIPT>
标签:function,int,JavaScript,ms,var,WebGL3D,gl,event From: https://www.cnblogs.com/geovindu/p/17904844.html