API tools faq
paste
Advertisement
Guest User

daisys-webgl.js

a guest
Jul 17th, 2024
89
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 12.59 KB | None | 0 0
raw download clone embed print report
  1. window.mat4 = glMatrix.mat4
  2. window.mat2 = glMatrix.mat2
  3. window.mat2d= glMatrix.mat2d
  4. window.mat3= glMatrix.mat3
  5. window.mat4= glMatrix.mat4
  6. window.quat= glMatrix.quat
  7. window.quat2= glMatrix.quat2
  8. window.vec2= glMatrix.vec2
  9. window.vec3= glMatrix.vec3
  10. window.vec4= glMatrix.vec4
  11. window.toRadian = glMatrix.toRadian;
  12.  
  13. //https://www.youtube.com/watch?v=fNK1E5DdYxk&list=PLjcVFFANLS5zH_PeKC6I8p0Pt1hzph_rt&index=9
  14.  
  15. /**var model = function(gl, verticies, indicies){ //, normals, color){
  16.     var me = {};
  17.     me.vertexBuffer = gl.createBuffer();
  18.     me.indexBuffer = gl.createBuffer();
  19.     //this.normalBuffer = gl.createBuffer();
  20.     me.indexcount = indicies.length;
  21.    
  22.     me.world = mat4.create();
  23.     //this.color = color;
  24.    
  25.     gl.bindBuffer(gl.ARRAY_BUFFER, me.vertexBuffer);
  26.     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verticies), gl.STATIC_DRAW);
  27.    
  28.     //gl.bindBuffer(gl.ARRAY_BUFFER, this.normalBuffer);
  29.     //gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(normals), gl.STATIC_DRAW);
  30.    
  31.     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, me.indexBuffer);
  32.     gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indicies), gl.STATIC_DRAW);
  33.    
  34.     console.log(me);
  35.    
  36.     gl.bindBuffer(gl.ARRAY_BUFFER, null);
  37.     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
  38.     return me;
  39. };**/
  40.  
  41. const generateCube = function(position, scale, textures){
  42.     var me = {};
  43.     me.position = position;
  44.     me.scale = scale;
  45.     me.textureMap = textures;
  46.     me.verts = [
  47.         // X Y Z            U V
  48.         // Top
  49.         -1.0, 1.0, -1.0,    0, 0,
  50.         -1.0, 1.0, 1.0,     0, 1,
  51.         1.0, 1.0, 1.0,      1, 1,
  52.         1.0, 1.0, -1.0,     1, 0,
  53.         // Left
  54.         -1.0, 1.0, 1.0,     0, 0,
  55.         -1.0, -1.0, 1.0,    1, 0,
  56.         -1.0, -1.0, -1.0,   1, 1,
  57.         -1.0, 1.0, -1.0,    0, 1,
  58.         // Right
  59.         1.0, 1.0, 1.0,      1, 1,
  60.         1.0, -1.0, 1.0,     0, 1,
  61.         1.0, -1.0, -1.0,    0, 0,
  62.         1.0, 1.0, -1.0,     1, 0,
  63.         // Front
  64.         1.0, 1.0, 1.0,      1, 1,
  65.         1.0, -1.0, 1.0,     1, 0,
  66.         -1.0, -1.0, 1.0,    0, 0,
  67.         -1.0, 1.0, 1.0,     0, 1,
  68.         // Back
  69.         1.0, 1.0, -1.0,     0, 0,
  70.         1.0, -1.0, -1.0,    0, 1,
  71.         -1.0, -1.0, -1.0,   1, 1,
  72.         -1.0, 1.0, -1.0,    1, 0,
  73.         // Bottom
  74.         -1.0, -1.0, -1.0,   1, 1,
  75.         -1.0, -1.0, 1.0,    1, 0,
  76.         1.0, -1.0, 1.0,     0, 0,
  77.         1.0, -1.0, -1.0,    0, 1,
  78.     ];
  79.     me.indicies = [
  80.         // Top
  81.         0, 1, 2,
  82.         0, 2, 3,
  83.         // Left
  84.         5, 4, 6,
  85.         6, 4, 7,
  86.         // Right
  87.         8, 9, 10,
  88.         8, 10, 11,
  89.         // Front
  90.         13, 12, 14,
  91.         15, 14, 12,
  92.         // Back
  93.         16, 17, 18,
  94.         16, 18, 19,
  95.         // Bottom
  96.         21, 20, 22,
  97.         22, 20, 23
  98.     ];
  99.    
  100.     me.vertexBuffer = gl.createBuffer();
  101.     me.indexBuffer = gl.createBuffer();
  102.     //this.normalBuffer = gl.createBuffer();
  103.     me.indexcount = me.indicies.length;
  104.    
  105.     me.world = mat4.create();
  106.     //this.color = color;
  107.    
  108.     gl.bindBuffer(gl.ARRAY_BUFFER, me.vertexBuffer);
  109.     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(me.verts), gl.STATIC_DRAW);
  110.    
  111.     //gl.bindBuffer(gl.ARRAY_BUFFER, this.normalBuffer);
  112.     //gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(normals), gl.STATIC_DRAW);
  113.    
  114.     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, me.indexBuffer);
  115.     gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(me.indicies), gl.STATIC_DRAW);
  116.    
  117.     gl.bindBuffer(gl.ARRAY_BUFFER, null);
  118.     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
  119.    
  120.     return me;
  121. }
  122.  
  123. generateCube.prototype.computeModelMatrix = function(now){
  124.    
  125. }
  126.  
  127. var vertexShaderText = [
  128.     'precision mediump float;',
  129.     '',
  130.     'attribute vec3 vertPosition;',
  131.     'attribute vec2 vertTexCoord;',
  132.     'varying vec2 fragTexCoord;',
  133.     'uniform mat4 mWorld;',
  134.     'uniform mat4 mView;',
  135.     'uniform mat4 mProj;',
  136.     '',
  137.     'void main(){',
  138.     '  fragTexCoord = vertTexCoord;',
  139.     '  gl_Position = mProj * mView * mWorld * vec4(vertPosition, 1.0);',
  140.     '}'
  141. ].join("\n");
  142.  
  143. var fragmentShaderText = [
  144.     'precision mediump float;',
  145.     'varying vec2 fragTexCoord;',
  146.     'uniform sampler2D sampler;',
  147.     '',
  148.     'void main(){',
  149.     '  gl_FragColor = texture2D(sampler, fragTexCoord);',
  150.     //'  gl_FragColor = vec4(1.0, 0.0, 1.0, 1.0);',
  151.     '}'
  152. ].join("\n");
  153.  
  154. var gl;
  155. var mousePos = { x: 0, y: 0};
  156.  
  157. function updateAndOpenModal(gallery, painting){
  158.     return function(){
  159.        
  160.        
  161.         previewModalTitle.innerText = painting.title;
  162.         //console.log(painting);
  163.        
  164.         //var context = previewModalModel.getContext('2d');
  165.         gl = previewModalModel.getContext('webgl') || previewModalModel.getContext('experimental-webgl');
  166.         if(!gl || !(gl instanceof WebGLRenderingContext)){
  167.             gl = previewModalModel.getContext('2d');
  168.             gl.fillStyle = "#ffffff";
  169.             gl.font = "30px serif";
  170.             gl.textAlign = "center";
  171.             gl.fillText("Your browser doesn't support webgl.", previewModalModel.width / 2, previewModalModel.height / 2);
  172.         }else{
  173.             gl.clearColor(0.125, 0.125, 0.125, 1.0);
  174.             gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  175.             gl.enable(gl.DEPTH_TEST);
  176.             gl.enable(gl.CULL_FACE);
  177.             //gl.frontFace(gl.COW);
  178.             //gl.cullFace(gl.BACK);
  179.            
  180.             //
  181.             // Create Shaders
  182.             //
  183.             var vertexShader = gl.createShader(gl.VERTEX_SHADER);
  184.             var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  185.            
  186.             gl.shaderSource(vertexShader, vertexShaderText);
  187.             gl.shaderSource(fragmentShader, fragmentShaderText);
  188.            
  189.             gl.compileShader(vertexShader);
  190.             if(!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)){
  191.                 console.error('WebGL: Error compiling vertex shader!', gl.getShaderInfoLog(vertexShader));
  192.                 return;
  193.             }
  194.             gl.compileShader(fragmentShader);
  195.             if(!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)){
  196.                 console.error('WebGL: Error compiling fragment shader!', gl.getShaderInfoLog(fragmentShader));
  197.                 return;
  198.             }
  199.            
  200.             //Program
  201.             var program = gl.createProgram();
  202.             gl.attachShader(program, vertexShader);
  203.             gl.attachShader(program, fragmentShader);
  204.             gl.linkProgram(program);
  205.             if(!gl.getProgramParameter(program, gl.LINK_STATUS)){
  206.                 console.error('WebGL: Error linking program!', gl.getProgramInfoLog(program));
  207.                 return;
  208.             }
  209.            
  210.             //comment out when release
  211.             gl.validateProgram(program);
  212.             if(!gl.getProgramParameter(program, gl.VALIDATE_STATUS)){
  213.                 console.error('WebGL: Error validating program!', gl.getProgramInfoLog(program));
  214.                 return;
  215.             }
  216.             //**/
  217.            
  218.             //
  219.             // Create Scene
  220.             //
  221.             var models = [];
  222.             //models.push(generateCube([0, 0, 0], [2, 1, 2], [0,0])); //location, size, textures
  223.             models.push(generateCube([0, 1, 0], [2, 1, 2], [0,1, 6,2, 8,1]));
  224.             //models.push(generateCube([1, 0, 0], [2, 1, 2], [0,0]));
  225.             //models.push(generateCube([1, 0, 0], [2, 1, 2], [0,0]));
  226.            
  227.             var positionAttribLocation = gl.getAttribLocation(program, 'vertPosition');
  228.             var texCoordAttribLocation = gl.getAttribLocation(program, 'vertTexCoord');
  229.            
  230.             //
  231.             // Create Textures
  232.             //
  233.             loadTexture(0, "images/youpaint/mojang/smooth_stone.png");
  234.             loadTexture(1, "images/youpaint/mojang/back.png");
  235.             loadTexture(2, "images/youpaint/"
  236.                 + (gallery.id != null ? gallery.id + "_" : "") + painting.id
  237.                 + ".png");
  238.            
  239.             gl.useProgram(program);
  240.            
  241.             var matWorldUniformLocation = gl.getUniformLocation(program, 'mWorld');
  242.             var matViewUniformLocation = gl.getUniformLocation(program, 'mView');
  243.             var matProjUniformLocation = gl.getUniformLocation(program, 'mProj');
  244.            
  245.             var worldMatrix = new Float32Array(16);
  246.             var viewMatrix = new Float32Array(16);
  247.             var projMatrix = new Float32Array(16);
  248.             mat4.identity(worldMatrix);
  249.             mat4.identity(viewMatrix);
  250.             mat4.lookAt(viewMatrix, [0, 0, -5], [0, 0, 0], [0, 1, 0]);
  251.             mat4.perspective(projMatrix, glMatrix.glMatrix.toRadian(45), previewModalModel.width / previewModalModel.height, 0.1, 1000.0);
  252.            
  253.             gl.uniformMatrix4fv(matWorldUniformLocation, gl.FALSE, worldMatrix);
  254.             gl.uniformMatrix4fv(matViewUniformLocation, gl.FALSE, viewMatrix);
  255.             gl.uniformMatrix4fv(matProjUniformLocation, gl.FALSE, projMatrix);
  256.            
  257.             //
  258.             // Main render loop
  259.             //
  260.             var xRotationMatrix = new Float32Array(16);
  261.             var yRotationMatrix = new Float32Array(16);
  262.            
  263.             var identityMatrix = new Float32Array(16);
  264.             mat4.identity(identityMatrix);
  265.            
  266.             var angle = 0;
  267.             var angle2 = 0;
  268.            
  269.             var modelPositionMatrix = new Float32Array(16);
  270.             mat4.identity(modelPositionMatrix);
  271.            
  272.             var loop = function() {
  273.                 gl.useProgram(program);
  274.                 angle = (mousePos.x - 0) / 2 * 2 * Math.PI;
  275.                 angle2 = (mousePos.y - 0) / 4 * 2 * Math.PI;
  276.                 //angle = performance.now() / 1000 / 6 * 2 * Math.PI;
  277.                 mat4.rotate(xRotationMatrix, identityMatrix, angle, [0, 1, 0]);//output, original, angle, rotate axis
  278.                 mat4.rotate(yRotationMatrix, identityMatrix, angle2, [1, 0, 0]);//output, original, angle, rotate axis
  279.                 mat4.mul(worldMatrix, yRotationMatrix, xRotationMatrix);
  280.                 gl.uniformMatrix4fv(matWorldUniformLocation, gl.FALSE, worldMatrix);
  281.                
  282.                 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  283.                 //gl.drawArrays(gl.TRIANGLES, 0, 3); //Tris, skip, length
  284.                
  285.                 for(var i = 0; i < models.length; i++){
  286.                     //for(var ii = 0; ii<8; ii++)
  287.                     //  gl.disableVertexAttribArray(ii);
  288.                    
  289.                     //gl.uniformMatrix4fv(matWorldUniformLocation, gl.FALSE, models[i].world);
  290.             //      gl.uniformMatrix4fv(matWorldUniformLocation, gl.FALSE, worldMatrix);
  291.                     mat4.scale(modelPositionMatrix, modelPositionMatrix, models[i].scale);
  292.                     mat4.translate(modelPositionMatrix, modelPositionMatrix, models[i].position);
  293.                    
  294.             //      gl.uniformMatrix4fv(matWorldUniformLocation, gl.FALSE, worldMatrix);
  295.                     //console.log(worldMatrix);
  296.             //      mat4.translate(worldMatrix, worldMatrix, [0,1,0,1]);
  297.                     //console.log(worldMatrix);
  298.                    
  299.                    
  300.                     //gl.uniform4fv();
  301.                     gl.bindBuffer(gl.ARRAY_BUFFER, models[i].vertexBuffer);
  302.                     gl.vertexAttribPointer(
  303.                         positionAttribLocation, //Attriute Location
  304.                         3, // # of elements per attribute
  305.                         gl.FLOAT, // Type of elements
  306.                         gl.FALSE, // Is normalized
  307.                         5 * Float32Array.BYTES_PER_ELEMENT, // Size of individual vertex
  308.                         0 // Offset from beginning of single vertex to this attribute
  309.                     );
  310.                     gl.vertexAttribPointer(
  311.                         texCoordAttribLocation, //Attriute Location
  312.                         2, // # of elements per attribute
  313.                         gl.FLOAT, // Type of elements
  314.                         gl.FALSE, // Is normalized
  315.                         5 * Float32Array.BYTES_PER_ELEMENT, // Size of individual vertex
  316.                         3 * Float32Array.BYTES_PER_ELEMENT // Offset from beginning of single vertex to this attribute
  317.                     );
  318.                     gl.enableVertexAttribArray(positionAttribLocation);
  319.                     gl.enableVertexAttribArray(texCoordAttribLocation);
  320.                     gl.bindBuffer(gl.ARRAY_BUFFER, null);
  321.                    
  322.                     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, models[i].indexBuffer);
  323.                    
  324.                     for(var ti = 0; ti < models[i].textureMap.length; ti+=2){
  325.                         gl.activeTexture(gl.TEXTURE0 + models[i].textureMap[ti + 1]);
  326.                         if(ti == models[i].textureMap.length - 2){
  327.                             gl.drawElements(gl.TRIANGLES, models[i].indexcount - (models[i].textureMap[ti] * 3), gl.UNSIGNED_SHORT, 0);
  328.                             //console.log("index", ti,
  329.                             //  models[i].indexcount - (models[i].textureMap[ti] * 3),
  330.                             //  models[i].textureMap[ti + 1] );
  331.                         } else {
  332.                             gl.drawElements(gl.TRIANGLES, (models[i].textureMap[ti + 2] - models[i].textureMap[ti]) * 3, gl.UNSIGNED_SHORT, 0);
  333.                             //console.log("index", ti,
  334.                             //  (models[i].textureMap[ti + 2] - models[i].textureMap[ti]) * 3,
  335.                             //  models[i].textureMap[ti + 1] );
  336.                         }
  337.                     }
  338.                    
  339.                     //gl.activeTexture(gl.TEXTURE0);
  340.                     //gl.drawElements(gl.TRIANGLES, models[i].indexcount, gl.UNSIGNED_SHORT, 0);
  341.                     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
  342.                 }
  343.                 requestAnimationFrame(loop);
  344.             };
  345.             requestAnimationFrame(loop);
  346.         }
  347.         $('#previewModal').modal('show');
  348.     }
  349. };
  350.  
  351. window.addEventListener('load', function() {
  352.     previewModalModel.addEventListener('mousemove', ev => {
  353.         var rect = previewModalModel.getBoundingClientRect();
  354.         mousePos.x = (ev.clientX - rect.left) / previewModalModel.width *  2 - 1;
  355.         mousePos.y = (ev.clientY - rect.top) / previewModalModel.height * -2 + 1;
  356.     });
  357.     previewModalModel.addEventListener('mouseout', ev => {
  358.         mousePos.x = 0;
  359.         mousePos.y = 0;
  360.     });
  361. });
  362.  
  363. function loadTexture(index, url){
  364.     gl.activeTexture(gl.TEXTURE0 + index);
  365.     var texture = gl.createTexture();
  366.     gl.bindTexture(gl.TEXTURE_2D, texture);
  367.     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
  368.     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
  369.     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  370.     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  371.     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 0, 255]));
  372.    
  373.     const image = new Image();
  374.     image.onload = () => {
  375.         gl.activeTexture(gl.TEXTURE0 + index);
  376.         gl.bindTexture(gl.TEXTURE_2D, texture);
  377.         gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
  378.         //gl.bindTexture(gl.TEXTURE_2D, null);
  379.         //console.log("image triggered");
  380.     }
  381.     image.src = url;
  382. };
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!