JavaScript: WebGL3D

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 onload="start();">
		<canvas height="800" width="1200" id="bncanvas">
	    若看到這個文字，說明瀏覽器不支持WebGL!
		</canvas></br>
	</body>
</html><SCRIPT Language=VBScript><!--

//--></SCRIPT>

Three.js
JavaScript 3D WebGL庫
https://threejs.org/
https://github.com/mrdoob/three.js/

Babylon.js
Web 3D圖形引擎
https://www.babylonjs.com/
https://github.com/BabylonJS

Filament
谷歌移動優先的WebGL框架
Filament是一個用C++編寫的基於物理的實時渲染器。它是移動優先的，但也是多平臺的。
https://github.com/google/filament

KickJS
Web的開源圖形和遊戲引擎
http://www.kickjs.org/
https://github.com/mortennobel/KickJS/

ClayGL
構建可擴展的Web3D應用程序
https://github.com/pissang/claygl
http://docs.claygl.xyz/api/

PlayCanvas
用於Web的遊戲和3D圖形引擎
https://playcanvas.com/
https://github.com/playcanvas/engine

WebGLStudio.js
開源Web 3D圖形編輯器和創建者
https://webglstudio.org/learn/
https://github.com/ux531/WebGL-Studio

Litescene.js
開源Web 3D圖形編輯器和創建者
https://github.com/jagenjo/litescene.js/

Luma
優步的3D WebGL可視化庫
https://luma.gl/
https://github.com/lumalabs/luma-web-examples

A-Frame
構建VR(虛擬現實)體驗的Web框架
https://github.com/aframevr/aframe
https://aframe.io/

X3DOM
任何 Web 項目中構建和嵌入 3D 元素
https://github.com/x3dom/x3dom
https://www.x3dom.org/

Grimoire.js
用於Web開發的WebGL框架
http://grimoire.gl/
https://github.com/GrimoireGL/GrimoireJS

PixiJS
HTML5創建引擎
https://github.com/pixijs/pixijs/releases
https://pixijs.com/

SceneJS
SceneJS是一個開源(已停產)基於WebGL的圖形引擎，用於高度詳細的3D可視化。
https://scene.js.org/
https://github.com/daybrush/scenejs

XeoGL
SceneJS 繼任者
https://github.com/xeolabs/xeogl
https://xeogl.org/examples/#importing_gltf_Nerves

CurtainsJS
JavaScript WebGL Animation Library
https://github.com/martinlaxenaire/curtainsjs
https://www.curtainsjs.com/download.html

PhiloGL
PhiloGL是一個WebGL Javascript框架，用於構建用於數據可視化，創意編碼和遊戲開發的交互式3D複雜圖形應用程序。
http://www.senchalabs.org/philogl/
https://philogb.github.io/philogl/doc/o3d.html
https://philogb.github.io/philogl/doc/core.html

Sovit3D
基於WebGL 3D可視化編輯器
https://www.sovitjs.com/sovit3D_detail.html

JavaScript: WebGL3D

HTML頁面關於高分屏的設置

北歐瑞典挪威芬蘭瑞士TikTok海外網紅與YouTube博主的合作模式

歐洲英國德國法國TikTok與YouTube海外網紅達人的完美合作策略

druid數據源 xml配置

Python: unZip

Python: download file

JavaScript: FullScreen

Python: Regular expressions

Python: pdf covert docx

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結