<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="expires" content="-1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>draw more primitive</title>
<style>
*{padding:0;margin:0}
</style>
<script src="../lib/webgl-utils.js"></script>
<script src="../lib/webgl-debug.js"></script>
<script src="../lib/cuon-utils.js"></script>
<script src="../lib/Matrix.js"></script>
<script id="shader-vs1" type="x-shader/x-vertex">
attribute vec3 a_Position;
attribute vec2 a_TexCoord;
uniform mat4 u_MvpMatrix;
varying vec2 v_TexCoord;
void main() {
gl_Position = u_MvpMatrix * vec4(a_Position, 1.0);
v_TexCoord = a_TexCoord;
}
</script>
<script id="shader-fs1" type="x-shader/x-fragment">
precision mediump float;
varying vec2 v_TexCoord;
uniform sampler2D u_Sampler;
void main() {
gl_FragColor = texture2D(u_Sampler, v_TexCoord);
}
</script>
<script id="shader-vs2" type="x-shader/x-vertex">
attribute vec3 a_Position;
attribute vec2 a_TexCoord;
uniform mat4 u_MvpMatrix;
varying vec2 v_TexCoord;
void main() {
gl_Position = u_MvpMatrix * vec4(a_Position, 1.0);
v_TexCoord = a_TexCoord;
}
</script>
<script id="shader-fs2" type="x-shader/x-fragment">
precision mediump float;
varying vec2 v_TexCoord;
uniform sampler2D u_Sampler;
void main() {
gl_FragColor = texture2D(u_Sampler, v_TexCoord);
}
</script>
<script id="shader-vs3" type="x-shader/x-vertex">
attribute vec3 a_Position;
attribute vec2 a_TexCoord;
uniform mat4 u_MvpMatrix;
varying vec2 v_TexCoord;
void main() {
gl_Position = u_MvpMatrix * vec4(a_Position, 1.0);
v_TexCoord = a_TexCoord;
}
</script>
<script id="shader-fs3" type="x-shader/x-fragment">
precision mediump float;
varying vec2 v_TexCoord;
uniform sampler2D u_Sampler;
void main() {
gl_FragColor = texture2D(u_Sampler, v_TexCoord);
}
</script>
<script type="text/javascript">
//绘制地球
var common = {};
var pwgl1 = {};
var pwgl2 = {};
var pwgl3 = {};
function loadShaderFromDOM(id, gl) {
var shaderScript = document.getElementById(id);
var shaderSource = "";
var currentChild = shaderScript.firstChild;
while (currentChild) {
if (currentChild.nodeType == 3) { // 3 corresponds to TEXT_NODE
shaderSource += currentChild.textContent;
}
currentChild = currentChild.nextSibling;
}
var shader;
if (shaderScript.type == "x-shader/x-fragment") {
shader = gl.createShader(gl.FRAGMENT_SHADER);
} else if (shaderScript.type == "x-shader/x-vertex") {
shader = gl.createShader(gl.VERTEX_SHADER);
} else {
return null;
}
gl.shaderSource(shader, shaderSource);
gl.compileShader(shader);
return shader;
}
function setupShaders(pwgl) {
var gl = pwgl.gl;
var vertexShader = loadShaderFromDOM(pwgl.vs, gl);
var fragmentShader = loadShaderFromDOM(pwgl.fs, gl);
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);
pwgl.a_Position = gl.getAttribLocation(shaderProgram, "a_Position");
pwgl.a_TexCoord = gl.getAttribLocation(shaderProgram, "a_TexCoord");
pwgl.u_MvpMatrix = gl.getUniformLocation(shaderProgram, "u_MvpMatrix");
pwgl.u_Sampler = gl.getUniformLocation(shaderProgram, "u_Sampler");
}
var gridVal = 20//网格大小
//绘制切片
function drawSphere(R, texture, pwgl){//Size：切片对应地球范围
var gl = pwgl.gl;
//顶点坐标
var earthPosition = [];
//纹理坐标
var earthTextureCoordData = [];
for(var i = 0; i <= gridVal; i++){
for(var j = 0; j <= gridVal; j++){
var lat = i * Math.PI / gridVal - Math.PI / 2;//纬度范围从-π/2到π/2
var lon = j * 2 * Math.PI / gridVal - Math.PI;//经度范围从-π到π
var x = R * Math.cos(lat) * Math.cos(lon);
var y = R * Math.cos(lat) * Math.sin(lon);
var z = R * Math.sin(lat);
earthPosition.push(x, y, z);
var u = (1 / gridVal) * j;
var v = (1 / gridVal) * i;
earthTextureCoordData.push(u, v);
}
}
//索引坐标
var earthVertexIndices = [];
for(var i = 0; i < gridVal; i++){
for(var j = 0; j < gridVal; j++){
var first = i * (gridVal + 1) + j;
var second = first + gridVal + 1;
earthVertexIndices.push(first);
earthVertexIndices.push(second);
earthVertexIndices.push(first + 1);
earthVertexIndices.push(second);
earthVertexIndices.push(second + 1);
earthVertexIndices.push(first + 1);
}
}
//顶点位置缓冲区对象
pwgl.earthVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, pwgl.earthVertexPositionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(earthPosition), gl.STATIC_DRAW);
pwgl.earth_VERTEX_POS_BUF_ITEM_SIZE = 3;
gl.vertexAttribPointer(pwgl.a_Position, pwgl.earth_VERTEX_POS_BUF_ITEM_SIZE, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(pwgl.a_Position);
//顶点纹理缓冲区对象
pwgl.earthVertexTextureCoordinateBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, pwgl.earthVertexTextureCoordinateBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(earthTextureCoordData), gl.STATIC_DRAW);
pwgl.earth_VERTEX_TEX_COORD_BUF_ITEM_SIZE = 2;
gl.vertexAttribPointer(pwgl.a_TexCoord, pwgl.earth_VERTEX_TEX_COORD_BUF_ITEM_SIZE, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(pwgl.a_TexCoord);
//顶点索引缓冲区
pwgl.earthVertexIndexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, pwgl.earthVertexIndexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(earthVertexIndices), gl.STATIC_DRAW);
pwgl.earth_VERTEX_INDEX_BUF_ITEM_SIZE = 1;
pwgl.earth_VERTEX_INDEX_BUF_NUM_ITEMS = earthVertexIndices.length;
gl.bindTexture(gl.TEXTURE_2D, texture);//向target绑定纹理对象
gl.drawElements(gl.TRIANGLES, pwgl.earth_VERTEX_INDEX_BUF_NUM_ITEMS, gl.UNSIGNED_SHORT, 0);
}
function textureFinishedLoading(image, texture, pwgl) {
var gl = pwgl.gl;
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);//对纹理图像进行y轴反转
gl.activeTexture(gl.TEXTURE0);//开启0号纹理单元
gl.bindTexture(gl.TEXTURE_2D, texture);//向target绑定纹理对象
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);//配置纹理参数
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);//配置纹理图像
gl.uniform1i(pwgl.u_Sampler, 0);
}
function loadImageForTexture(url, texture, pwgl) {
var image = new Image();
image.src = url;
image.onload = function() {
textureFinishedLoading(image, texture, pwgl);
}
}
function setupTextures(pwgl){
var gl = pwgl.gl;
pwgl.sunTexture = gl.createTexture();
loadImageForTexture("../resources/sun.jpg", pwgl.sunTexture, pwgl);//太阳纹理
pwgl.earthTexture = gl.createTexture();
loadImageForTexture("../resources/earth.jpg", pwgl.earthTexture, pwgl);//地球纹理
pwgl.moonTexture = gl.createTexture();
loadImageForTexture("../resources/moon.gif", pwgl.moonTexture, pwgl);//月球纹理
}
var perspectiveMatrix = setPerspective(30, 1, 1, 100);
var lookAtMatrix1 = setLookAt(0,0,25,0,0,0,0,1,0);
var vpMatrix1 = multiply(perspectiveMatrix, lookAtMatrix1);
var lookAtMatrix2 = setLookAt(30,0,0,0,0,0,0,0,1);
var vpMatrix2 = multiply(perspectiveMatrix, lookAtMatrix2);
var lookAtMatrix3 = setLookAt(13,13,13,0,0,0,0,0,1);
var vpMatrix3 = multiply(perspectiveMatrix, lookAtMatrix3);
var mvpMatrix, scaleMatrix, translateMatrix, rotateMatrix;
var trMatrix;
