bill
5 years ago
commit
06d9bd36d1
|
After Width: | Height: | Size: 11 MiB |
|
After Width: | Height: | Size: 336 KiB |
@ -0,0 +1,321 @@
|
|||||||
|
<script src=lib1.js></script>
|
||||||
|
<script src="https://pagecdn.io/lib/ace/1.4.12/ace.js" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://pagecdn.io/lib/ace/1.4.12/ext-language_tools.js" crossorigin="anonymous"></script>
|
||||||
|
<style>
|
||||||
|
.ace_gutter-layer {
|
||||||
|
/* original width is 48px */
|
||||||
|
width: 25px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ace_gutter-layer > * {
|
||||||
|
/* 48 - 32 = 16 */
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
.ace_gutter-cell {
|
||||||
|
padding-left: 0 !important;
|
||||||
|
padding-right: 3px !important;
|
||||||
|
}
|
||||||
|
.code{
|
||||||
|
font-family: "monaco, menlo, ubuntu mono, consolas, source-code-pro" ;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<body bgcolor=white text=black link=black alink=blue vlink=blue>
|
||||||
|
<center>
|
||||||
|
<canvas id='canvas1' width=600 height=600></canvas>
|
||||||
|
</center>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
|
||||||
|
<!!-------- VERTEX SHADER: YOU PROBABLY DON'T WANT TO CHANGE THIS RIGHT NOW -------->
|
||||||
|
|
||||||
|
<script id='my_vertex_shader' type='x-shader/x-vertex'>
|
||||||
|
attribute vec3 aPos;
|
||||||
|
varying vec3 vPos;
|
||||||
|
void main() {
|
||||||
|
gl_Position = vec4(aPos, 1.);
|
||||||
|
vPos = aPos;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<!!-------- FRAGMENT SHADER: THIS IS WHERE YOU WILL DO YOUR WORK -------->
|
||||||
|
|
||||||
|
<script id='my_fragment_shader' type='x-shader/x-fragment'>
|
||||||
|
|
||||||
|
uniform float uTime; // TIME, IN SECONDS
|
||||||
|
|
||||||
|
varying vec3 vPos; // -1 < vPos.x < +1
|
||||||
|
// -1 < vPos.y < +1
|
||||||
|
// vPos.z == 0
|
||||||
|
|
||||||
|
uniform sampler2D uSampler;
|
||||||
|
// YOU MUST DEFINE A main() FUNCTION.
|
||||||
|
|
||||||
|
void main() {
|
||||||
|
|
||||||
|
////////////////////////////////////////////////
|
||||||
|
//
|
||||||
|
// HERE, FOR YOUR HOMEWORK, YOU CAN WRITE ANY
|
||||||
|
// CODE YOU LIKE
|
||||||
|
|
||||||
|
//DEFINE A COLOR FOR THIS FRAGMENT.
|
||||||
|
|
||||||
|
// LIGHT DIRECTION AND COLOR
|
||||||
|
|
||||||
|
vec3 LDir = vec3(1, 1, 1);
|
||||||
|
vec3 LCol = vec3(1.,.98,.9);
|
||||||
|
vec3 VDir = vec3(0., 0., 1.);
|
||||||
|
|
||||||
|
float R = 0.5 + 0.3*sin(uTime/10.);
|
||||||
|
// vPos IS THE 3D LOCATION OF THIS FRAGMENT.
|
||||||
|
|
||||||
|
// SURFACE REFLECTANCE PROPERTIES
|
||||||
|
|
||||||
|
vec3 diffuse = vec3(.7,.7,.6);
|
||||||
|
vec3 ambient = vec3(.1,.1,.09);
|
||||||
|
vec3 specular = vec3(.35,.35,.3);
|
||||||
|
// CREATE A WACKY BACKGROUND PATTERN.
|
||||||
|
|
||||||
|
vec3 color = vec3(.5 + .5 * sin(20. * vPos.x + sin(10. * vPos.y + 5. * uTime)),
|
||||||
|
.5,
|
||||||
|
.5 + .5 * sin(20. * vPos.y + sin(10. * vPos.x + 5. * uTime)));
|
||||||
|
vec3 specularlight; //specular light should disregard object color.
|
||||||
|
|
||||||
|
float x = vPos.x;
|
||||||
|
float y = vPos.y;
|
||||||
|
|
||||||
|
// CREATE BOUNCING ANIMATION.
|
||||||
|
|
||||||
|
y += .5 - 2. * abs(.5 * sin(uTime));
|
||||||
|
|
||||||
|
// FIGURE OUT WHETHER THIS PIXEL IS ON THE SPHERE.
|
||||||
|
|
||||||
|
float rr = x * x + y * y;
|
||||||
|
|
||||||
|
// IF SO, THEN SHADE THE SPHERE.
|
||||||
|
|
||||||
|
if (rr < R*R) {
|
||||||
|
|
||||||
|
// COMPUTE THE z AND NORMAL OF THE SPHERE.
|
||||||
|
|
||||||
|
float z = R * sqrt(1. - rr/(R*R));
|
||||||
|
vec3 N = vec3(x,y,z) / R;
|
||||||
|
|
||||||
|
// APPLY SHADING AND LIGHTING.
|
||||||
|
vec3 realVPos = vec3(vPos.x, vPos.y, z);
|
||||||
|
//*DIRECTIONS ARE NORMALIZED TO GET THE CORRECT PHONG LIGHTING
|
||||||
|
LDir = normalize(LDir - realVPos);
|
||||||
|
VDir = normalize(VDir - realVPos);
|
||||||
|
|
||||||
|
vec3 lcolor = ambient;
|
||||||
|
lcolor += diffuse * max(0., dot(N, LDir)) * LCol;
|
||||||
|
//*SPECULAR LIGHTS ARE ADDED
|
||||||
|
specularlight = specular *
|
||||||
|
max(0., pow(dot(2.*dot(N, LDir) * N - LDir, VDir),3.)) * LCol;
|
||||||
|
// ROTATE THE TEXTURE OVER TIME.
|
||||||
|
|
||||||
|
float angle = 0.4 * uTime;
|
||||||
|
float px = cos(angle) * N.x + sin(angle) * N.z;
|
||||||
|
float pz = -sin(angle) * N.x + cos(angle) * N.z;
|
||||||
|
vec3 P = vec3(px, N.y, pz);
|
||||||
|
|
||||||
|
// APPLY PROCEDURAL NOISE TEXTURE.
|
||||||
|
|
||||||
|
float cloud = min(0.85, max(-0.05, 2. * noise(1.1 * P)));
|
||||||
|
//const float rspeed = 10.;
|
||||||
|
//*CALCULATING THE TEXTURE COORDINATE.
|
||||||
|
const float pi = 3.14159265359;
|
||||||
|
float tex_x = acos(abs(x)/sqrt(R*R-y*y));
|
||||||
|
if(x > 0.)
|
||||||
|
tex_x = pi - tex_x;
|
||||||
|
tex_x = R * tex_x;
|
||||||
|
tex_x *= 1.5708;//*Correct aspect ratio of texture 2:1 -> 2pir:2r
|
||||||
|
tex_x = tex_x + float(uTime)*R;
|
||||||
|
float _2pir = 2. * pi * R;
|
||||||
|
float quo = float(int(tex_x/_2pir));
|
||||||
|
tex_x = (tex_x - quo * _2pir) / _2pir;
|
||||||
|
//*TEXTURE MAPPING
|
||||||
|
color = lcolor *
|
||||||
|
(cloud + texture2D(uSampler, vec2(tex_x, ((R - y)/(2.*R)))).xyz) + specularlight;
|
||||||
|
|
||||||
|
}
|
||||||
|
//*CALCULATING LIGHTING AND SHADOWS FOR THE BACKGROUND
|
||||||
|
else{
|
||||||
|
vec3 realVPos = vec3(vPos.x, vPos.y, -1.);
|
||||||
|
vec3 N = vec3(0., 0., 1.);
|
||||||
|
vec3 C = vec3(0., vPos.y - y, 0.);
|
||||||
|
// APPLY SHADING AND LIGHTING.
|
||||||
|
|
||||||
|
|
||||||
|
vec3 lcolor = 6.*ambient;
|
||||||
|
//*CALCULATING DISTANCE BETWEEN SPHERE CENTER TO THE RAY
|
||||||
|
//BETWEEN THE POINT TO LIGHT SOURCE
|
||||||
|
vec3 LV = realVPos - LDir;
|
||||||
|
vec3 LC = C - LDir;
|
||||||
|
vec3 VC = C - realVPos;
|
||||||
|
float lLV = dot(LV, LV);
|
||||||
|
float lLC = dot(LC, LC);
|
||||||
|
float lVC = dot(VC, VC);
|
||||||
|
float RR = R*R;
|
||||||
|
float d_VCVL = -dot(VC, LV);
|
||||||
|
float dist = min(lLC, lVC);
|
||||||
|
if (d_VCVL > 0.)
|
||||||
|
dist = min(dist, lVC - d_VCVL*d_VCVL/lLV);
|
||||||
|
|
||||||
|
//*CALCULATE DISTANCE BETWEEN SPHERE CENTER TO THE RAY BETWEEN POINT TO CAMERA
|
||||||
|
vec3 EV = realVPos - VDir;
|
||||||
|
vec3 EC = C - VDir;
|
||||||
|
float lEV = dot(EV, EV);
|
||||||
|
float lEC = dot(EC, EC);
|
||||||
|
float d_VCVE = -dot(VC, EV);
|
||||||
|
float dist2 = min(lEC, lVC);
|
||||||
|
if (d_VCVE > 0.)
|
||||||
|
dist2 = min(dist2, lVC - d_VCVE*d_VCVE/lEV);
|
||||||
|
//*AMBIENT LIGHT WILL DECAY WHEN BACKGROUND POINT IS CLOSER TO THE SPHERE
|
||||||
|
//*FIRST THE DISTANCE IS NORMALIZED, THEN I CURVED IT WITH LOGISTIC FUNCTION
|
||||||
|
float aratio0 = 1./(1.+pow(2.71828,15.*(.2-(sqrt(lVC) - R - .4806)/1.381)));
|
||||||
|
lcolor *= aratio0;
|
||||||
|
diffuse *= pow(aratio0, 0.3);
|
||||||
|
//*TEST IF CAMERA CAN SEE THE POINT
|
||||||
|
if(dist2 < RR)
|
||||||
|
{
|
||||||
|
specular *= 0.;
|
||||||
|
float d = sqrt(dist2);
|
||||||
|
float ratio = pow(2., sqrt(dist2)/R) - 1.;
|
||||||
|
diffuse *= ratio;
|
||||||
|
}
|
||||||
|
//*TEST IF THE LIGHT CAN REACH THE BACKGROUND POINT DIRECTLY
|
||||||
|
if(dist < RR)
|
||||||
|
{
|
||||||
|
specular *= 0.;
|
||||||
|
float ratio = pow(2.7, sqrt(dist)/R) - 1.7;
|
||||||
|
float aratio = pow(2., sqrt(dist)/R) - 1.;
|
||||||
|
|
||||||
|
if(ratio < 0.)
|
||||||
|
ratio = 0.;
|
||||||
|
diffuse *= ratio;
|
||||||
|
lcolor *= aratio;
|
||||||
|
}
|
||||||
|
LDir = normalize(LDir - realVPos);
|
||||||
|
VDir = normalize(VDir - realVPos);
|
||||||
|
|
||||||
|
lcolor += 1.2*diffuse * max(0., dot(N, LDir)) * LCol;
|
||||||
|
specularlight = 0.3*specular *
|
||||||
|
max(0., pow(dot(2.*dot(N, LDir) * N - LDir, VDir),32.)) * LCol;
|
||||||
|
|
||||||
|
color = color * lcolor + specularlight;
|
||||||
|
}
|
||||||
|
// APPLY GAMMA CORRECTION AND SET THE PIXEL COLOR.
|
||||||
|
|
||||||
|
gl_FragColor = vec4(sqrt(color), 1.0);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<!!-------- CREATE A PROPERLY DESCRIPTIVE TITLE BELOW -------->
|
||||||
|
|
||||||
|
<script id='my_title' type='text/html'>
|
||||||
|
The Bouncing Earth
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<!!-------- HERE IS WHERE YOU CAN PROVIDE A LONGER TEXT DESCRIPTION -------->
|
||||||
|
|
||||||
|
<script id='my_instructions' type='text/html'><font color=#909090>
|
||||||
|
<p style="font-size:30px; ">This is a description
|
||||||
|
of my cool homework
|
||||||
|
that you are seeing now.</p>
|
||||||
|
<p>
|
||||||
|
<i style="font-size:25px;">Here is how it works:</i>
|
||||||
|
<ul>
|
||||||
|
<li>First, I added <a href="http://planetpixelemporium.com/download/download.php?earthmap1k.jpg">texture</a> to the sphere. The code to load the texture is from
|
||||||
|
<a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">here</a>. Please wait a sec for the texture to download.</li>
|
||||||
|
<li>Then, I mapped the 3D sphere surface to the rectangular 2D texture picture. </li>
|
||||||
|
<li>I also make it look like it's rotating by adding uTime to the offset of the texture and reset the offset to 0 whenever it exceeds
|
||||||
|
the width of the texture.</li>
|
||||||
|
<li>I used Perlin Noise to generate fake clouds.</li>
|
||||||
|
<li> I modified the lighting so that the light source won't move with the sphere and
|
||||||
|
the lighting will change when the sphere moves. I also added specular lights to make it shinier.</li>
|
||||||
|
<li> Finally, I tried to add some 'soft shadow' to it. I used a mix of methods inspired by Ambient Occlusion and Ray Tracing.<br>
|
||||||
|
<ul>
|
||||||
|
<li>The Ambient lights and diffusion lights are reduced with respect to the distance between the background point and the sphere.</li>
|
||||||
|
<li>The specular light of the background wall is eliminated and the diffusion factor is reduced when the ray shooting from the background point
|
||||||
|
towards the light source or from the background point towards the camera position intersect with the sphere.</li>
|
||||||
|
</ul>
|
||||||
|
<li>Also, I made some small changes like changing R over time and refined the UI a little bit. I used
|
||||||
|
<a href="https://ace.c9.io">Ace</a> for code highlighting and autocompletion on the edit panel.</li>
|
||||||
|
<li>Comments begin with '//*' are added by me.</li>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<!!-------- YOU PROBABLY DON'T WANT TO CHANGE ANYTHING BELOW FOR NOW -------->
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
// CREATE THE HTML DOCUMENT
|
||||||
|
|
||||||
|
let vs = my_vertex_shader.innerHTML,
|
||||||
|
fs = my_fragment_shader.innerHTML;
|
||||||
|
fs = fs.substring(1, fs.length);
|
||||||
|
|
||||||
|
document.body.innerHTML = [''
|
||||||
|
,'<margin-left:750px font size=8 color=#909090>' + my_title.innerHTML
|
||||||
|
,'<TABLE cellspacing=0 cellpadding=0><TR>'
|
||||||
|
,'<td><font color=red size=5><div id=errorMessage></div></font></td>'
|
||||||
|
,'</TR><TR>'
|
||||||
|
,'<table cellspacing=0>'
|
||||||
|
,'<tr>'
|
||||||
|
,'<td valign=top>'
|
||||||
|
,'<div id="ace" style="width:800px;height:1650px;"></div>'
|
||||||
|
,'</td><td valign=top>' + document.body.innerHTML + '<div style=\'font-size:25px\'>' + my_instructions.innerHTML + '</div>' + '</td>'
|
||||||
|
,'</tr></table>'
|
||||||
|
,'</TR></TABLE>'
|
||||||
|
].join('');
|
||||||
|
|
||||||
|
// SET UP THE EDITABLE TEXT AREA ON THE LEFT SIDE.
|
||||||
|
|
||||||
|
let text = fs.split('\n'), cols = 0;
|
||||||
|
for (let i = 0 ; i < text.length ; i++)
|
||||||
|
cols = Math.max(cols, text[i].length);
|
||||||
|
ace.require("ace/ext/language_tools");
|
||||||
|
var editor = ace.edit("ace", {
|
||||||
|
mode:"ace/mode/glsl",
|
||||||
|
theme:"ace/theme/crimson_editor"
|
||||||
|
});
|
||||||
|
editor.setOptions({
|
||||||
|
enableBasicAutocompletion: true,
|
||||||
|
enableSnippets: true,
|
||||||
|
enableLiveAutocompletion: true,
|
||||||
|
fontSize: 14,
|
||||||
|
fontFamily: "monaco, menlo, ubuntu mono, consolas, source-code-pro",
|
||||||
|
fixedWidthGutter: true,
|
||||||
|
showGutter: true,
|
||||||
|
showPrintMargin: false,
|
||||||
|
});
|
||||||
|
editor.setAutoScrollEditorIntoView(true);
|
||||||
|
editor.getSession().setValue(fs);
|
||||||
|
// REPARSE THE SHADER PROGRAM AFTER EVERY KEYSTROKE.
|
||||||
|
editor.session.on('change', function(delta) {
|
||||||
|
canvas1.setShaders(vs, editor.getSession().getValue());
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// SET THE CURRENT TIME IN SECONDS BEFORE RENDERING EACH FRAME.
|
||||||
|
|
||||||
|
let startTime = Date.now();
|
||||||
|
|
||||||
|
function animate(gl) {
|
||||||
|
let time = (Date.now() - startTime) / 1000;
|
||||||
|
setUniform('1f', 'uTime', time);
|
||||||
|
}
|
||||||
|
|
||||||
|
// START EVERYTHING.
|
||||||
|
|
||||||
|
gl_start(canvas1, vs, fs);
|
||||||
|
</script>
|
||||||
|
|
||||||
@ -0,0 +1,175 @@
|
|||||||
|
|
||||||
|
//////////////////////////////////////////////////////////////////////////////////////////
|
||||||
|
//
|
||||||
|
// THIS IS THE SUPPORT LIBRARY. YOU PROBABLY DON'T WANT TO CHANGE ANYTHING HERE JUST YET.
|
||||||
|
//
|
||||||
|
//////////////////////////////////////////////////////////////////////////////////////////
|
||||||
|
|
||||||
|
let fragmentShaderHeader = ['' // WHATEVER CODE WE WANT TO PREDEFINE FOR FRAGMENT SHADERS
|
||||||
|
, 'precision highp float;'
|
||||||
|
, 'float noise(vec3 point) { float r = 0.; for (int i=0;i<16;i++) {'
|
||||||
|
, ' vec3 D, p = point + mod(vec3(i,i/4,i/8) , vec3(4.0,2.0,2.0)) +'
|
||||||
|
, ' 1.7*sin(vec3(i,5*i,8*i)), C=floor(p), P=p-C-.5, A=abs(P);'
|
||||||
|
, ' C += mod(C.x+C.y+C.z,2.) * step(max(A.yzx,A.zxy),A) * sign(P);'
|
||||||
|
, ' D=34.*sin(987.*float(i)+876.*C+76.*C.yzx+765.*C.zxy);P=p-C-.5;'
|
||||||
|
, ' r+=sin(6.3*dot(P,fract(D)-.5))*pow(max(0.,1.-2.*dot(P,P)),4.);'
|
||||||
|
, '} return .5 * sin(r); }'
|
||||||
|
].join('\n');
|
||||||
|
|
||||||
|
let nfsh = fragmentShaderHeader.split('\n').length; // NUMBER OF LINES OF CODE IN fragmentShaderHeader
|
||||||
|
|
||||||
|
let isFirefox = navigator.userAgent.indexOf('Firefox') > 0; // IS THIS THE FIREFOX BROWSER?
|
||||||
|
let errorMsg = '';
|
||||||
|
//
|
||||||
|
// Initialize a texture and load an image.
|
||||||
|
// When the image finished loading copy it into the texture.
|
||||||
|
//
|
||||||
|
function loadTexture(gl, url) {
|
||||||
|
const texture = gl.createTexture();
|
||||||
|
gl.bindTexture(gl.TEXTURE_2D, texture);
|
||||||
|
|
||||||
|
// Because images have to be downloaded over the internet
|
||||||
|
// they might take a moment until they are ready.
|
||||||
|
// Until then put a single pixel in the texture so we can
|
||||||
|
// use it immediately. When the image has finished downloading
|
||||||
|
// we'll update the texture with the contents of the image.
|
||||||
|
const level = 0;
|
||||||
|
const internalFormat = gl.RGBA;
|
||||||
|
const width = 1;
|
||||||
|
const height = 1;
|
||||||
|
const border = 0;
|
||||||
|
const srcFormat = gl.RGBA;
|
||||||
|
const srcType = gl.UNSIGNED_BYTE;
|
||||||
|
const pixel = new Uint8Array([0, 0, 255, 255]); // opaque blue
|
||||||
|
gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
|
||||||
|
width, height, border, srcFormat, srcType,
|
||||||
|
pixel);
|
||||||
|
|
||||||
|
const image = new Image();
|
||||||
|
image.onload = function () {
|
||||||
|
gl.bindTexture(gl.TEXTURE_2D, texture);
|
||||||
|
gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
|
||||||
|
srcFormat, srcType, image);
|
||||||
|
|
||||||
|
// WebGL1 has different requirements for power of 2 images
|
||||||
|
// vs non power of 2 images so check if the image is a
|
||||||
|
// power of 2 in both dimensions.
|
||||||
|
if (isPowerOf2(image.width) && isPowerOf2(image.height)) {
|
||||||
|
// Yes, it's a power of 2. Generate mips.
|
||||||
|
gl.generateMipmap(gl.TEXTURE_2D);
|
||||||
|
} else {
|
||||||
|
// No, it's not a power of 2. Turn off mips and set
|
||||||
|
// wrapping to clamp to edge
|
||||||
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
||||||
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
||||||
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
image.src = url;
|
||||||
|
|
||||||
|
return texture;
|
||||||
|
}
|
||||||
|
|
||||||
|
function isPowerOf2(value) {
|
||||||
|
return (value & (value - 1)) == 0;
|
||||||
|
}
|
||||||
|
function gl_start(canvas, vertexShader, fragmentShader) { // START WEBGL RUNNING IN A CANVAS
|
||||||
|
|
||||||
|
setTimeout(function () {
|
||||||
|
try {
|
||||||
|
canvas.gl = canvas.getContext('experimental-webgl'); // Make sure WebGl is supported. IT WOULD BE GREAT TO USE WEBGL2 INSTEAD.
|
||||||
|
} catch (e) { throw 'Sorry, your browser does not support WebGL.'; }
|
||||||
|
|
||||||
|
canvas.setShaders = function (vertexShader, fragmentShader) { // Add the vertex and fragment shaders:
|
||||||
|
|
||||||
|
let gl = this.gl, program = gl.createProgram(); // Create the WebGL program.
|
||||||
|
|
||||||
|
function addshader(type, src) { // Create and attach a WebGL shader.
|
||||||
|
function spacer(color, width, height) {
|
||||||
|
return '<table bgcolor=' + color +
|
||||||
|
' width=' + width +
|
||||||
|
' height=' + height + '><tr><td> </td></tr></table>';
|
||||||
|
}
|
||||||
|
errorMessage.innerHTML = '<br>';
|
||||||
|
// errorMarker.innerHTML = spacer('white', 1, 1) + '<font size=1 color=white>\u25B6</font>';
|
||||||
|
let shader = gl.createShader(type);
|
||||||
|
gl.shaderSource(shader, src);
|
||||||
|
gl.compileShader(shader);
|
||||||
|
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
||||||
|
let msg = gl.getShaderInfoLog(shader);
|
||||||
|
console.log('Cannot compile shader:\n\n' + msg);
|
||||||
|
|
||||||
|
let a = msg.substring(6, msg.length);
|
||||||
|
let line = 0;
|
||||||
|
if (a.substring(0, 3) == ' 0:') {
|
||||||
|
a = a.substring(3, a.length);
|
||||||
|
line = parseInt(a) - nfsh;
|
||||||
|
|
||||||
|
editor.session.setAnnotations([{
|
||||||
|
row: line,
|
||||||
|
column: 0,
|
||||||
|
text: msg,
|
||||||
|
type: "error"
|
||||||
|
}]);
|
||||||
|
}
|
||||||
|
let j = a.indexOf(':');
|
||||||
|
a = 'line ' + (line+1) + a.substring(j, a.length);
|
||||||
|
if ((j = a.indexOf('\n')) > 0)
|
||||||
|
a = a.substring(0, j);
|
||||||
|
errorMessage.innerHTML = a;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
editor.session.clearAnnotations();
|
||||||
|
gl.attachShader(program, shader);
|
||||||
|
};
|
||||||
|
|
||||||
|
addshader(gl.VERTEX_SHADER, vertexShader); // Add the vertex and fragment shaders.
|
||||||
|
addshader(gl.FRAGMENT_SHADER, fragmentShaderHeader + fragmentShader);
|
||||||
|
|
||||||
|
gl.linkProgram(program); // Link the program, report any errors.
|
||||||
|
if (!gl.getProgramParameter(program, gl.LINK_STATUS))
|
||||||
|
console.log('Could not link the shader program!');
|
||||||
|
gl.useProgram(program);
|
||||||
|
gl.program = program;
|
||||||
|
|
||||||
|
let texture = loadTexture(gl, './earthmap1k.jpg') //Texture loading.
|
||||||
|
// Tell WebGL we want to affect texture unit 0
|
||||||
|
gl.activeTexture(gl.TEXTURE0);
|
||||||
|
// Bind the texture to texture unit 0
|
||||||
|
gl.bindTexture(gl.TEXTURE_2D, texture);
|
||||||
|
// Tell the shader we bound the texture to texture unit 0
|
||||||
|
gl.uniform1i(gl.getUniformLocation(program, 'uSampler'), 0);
|
||||||
|
|
||||||
|
|
||||||
|
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); // Create a square as a triangle strip
|
||||||
|
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array( // consisting of two triangles.
|
||||||
|
[-1, 1, 0, 1, 1, 0, -1, -1, 0, 1, -1, 0]), gl.STATIC_DRAW);
|
||||||
|
|
||||||
|
let aPos = gl.getAttribLocation(program, 'aPos'); // Set aPos attribute for each vertex.
|
||||||
|
gl.enableVertexAttribArray(aPos);
|
||||||
|
gl.vertexAttribPointer(aPos, 3, gl.FLOAT, false, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas.setShaders(vertexShader, fragmentShader); // Initialize everything,
|
||||||
|
|
||||||
|
setInterval(function () { // Start the animation loop.
|
||||||
|
gl = canvas.gl;
|
||||||
|
if (gl.startTime === undefined) // First time through,
|
||||||
|
gl.startTime = Date.now(); // record the start time.
|
||||||
|
animate(gl);
|
||||||
|
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); // Render the square.
|
||||||
|
}, 30);
|
||||||
|
|
||||||
|
}, 100); // Wait 100 milliseconds after page has loaded before starting WebGL.
|
||||||
|
}
|
||||||
|
|
||||||
|
// THE animate() CALLBACK FUNCTION CAN BE REDEFINED IN index.html.
|
||||||
|
|
||||||
|
function animate() { }
|
||||||
|
|
||||||
|
let gl;
|
||||||
|
function setUniform(type, name, a, b, c, d, e, f) {
|
||||||
|
let loc = gl.getUniformLocation(gl.program, name);
|
||||||
|
(gl['uniform' + type])(loc, a, b, c, d, e, f);
|
||||||
|
}
|
||||||
|
|
||||||
Loading…
Reference in new issue