Coding 26 April 2023 PDF

# Coding 26.04.23 15:49 ## Vertex Shader um Koordinaten in Clip Space Koordinaten umzurechnen? ``` Var vertexShaderSource = '#version 300 es in vec2 a_position uniform vec2 u_resolution; void main(){ vec2 tendToOne = a_position / u_resolution; vec2 zeroToTwo = tendToOne * (2.0); vec2 clipSpaceCoo...

# Coding 26.04.23 15:49 ## Vertex Shader um Koordinaten in Clip Space Koordinaten umzurechnen? ``` Var vertexShaderSource = '#version 300 es in vec2 a_position uniform vec2 u_resolution; void main(){ vec2 tendToOne = a_position / u_resolution; vec2 zeroToTwo = tendToOne * (2.0); vec2 clipSpaceCoords = zeroToTwo - (1.0); gl_Position = vec4(clipSpaceCoords.xy, 0.0, 1.0); ``` ## Buffering ``` let positionBuffer = gl.createBuffer(); let positions = [-1, 1, 1, 1, 0, 0, -1, 1, 1, 1, 0, 0]; gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); ``` ## Fragment Shader für grünes Dreieck ``` var fragmentShaderSource = "#version 300 es precision mediump float; uniform vec3 the_color; out vec4 fragmentColor; void main(){ fragmentColor = vec4(the_color.rgb, 1.0); }; ``` ## JS: ``` const shader = this.shader; shader.theColor = gl.getUniformLocation(program, "the_color"); gl.uniform3f(shader.theColor, 0.0, 1.0, 0.0); ``` ## Fachhochschule Dortmund ## minimalisten Vertex Shader ``` #version 300 es in vec2 a_position void main(){ gl_Position = a_position; ``` ## Fragment-Shader ``` version 300 es precision mediump float, out vec4 outColor; void main(){ outColor = vec4(0,0,0,1); }; ``` ## Vertex.shader & JS Code for Transformation (Rotation 180 grad). ``` var vertexShaderSource = `#version 300 es vec2 a_position; uniform mat3 u_matrix; void main(){ vec2 position = (u_matrix * vec3(a_position, 1.0)).xy; gl_position = vec4(position, 0.0, 1.0); ``` ``` Var rotationMatrix = m3.rotation(deg2rad(180)); gl.uniformMatrix3fv(matrixLocation, true, rotationMatrix); Var matrixLocation = gl.getUniformLocation(program, "u_matrix"); ``` ## 3D Objekt: ``` Var Vertex Shader Source= '#Version 300 es in vec2 a_position; Uniform mat4 u_matrix; void main() { gl_position = u_matrix * a_position; ``` ## JS Code Verknüpfen Translation & Rotation. ``` var translationMatrix = m3.translation(-1, 1); var rotationMatrix = m3.rotation(deg2rad(180)); Var matrix = m3.multiply(rotationMatrix, translationMatrix); var matrixlocation = gl.getUniformLocation(program, "u_matrix"); gl.uniformMatrix3fv(matrixlocation, true, matrix); ``` ## 3D mit verschiedene Farbe an jene Gesicht: ``` Var Vertex Shader = '#version 300 es in vec2 a_position; in vec4 a_color; uniform mat4 u_matrix; out vec4 v_color; void main() { gl_position = u_matrix * a_position; v_color = a_Color; ``` ## Perspektivischen Kamera mit field of view von 60 Grad: ``` var fov = 60; var aspect = gl.canvas.clientWidth / gl.canvas.clientHeight; let projectionMatrix = m4.perspective(fov, aspect, zNear, zFar); let rotationX = m4.xRotation(math.deg2rad(rotation[0])); let rotationY = m4.yRotation(math.deg2rad(rotation[1])); let rotationZ = m4.zRotation(math.deg2rad(rotation[2])); let translation = m4.translation(translation[0], translation[1], translation[2]); let cameraMatrix = m4.multiply(rotationX, rotationY); cameraMatrix = m4.multiply(cameraMatrix, rotationZ); cameraMatrix = m4.multiply(cameraMatrix, translation); let viewMatrix = m4.inverse(cameraMatrix); let viewProjectionMatrix = m4.multiply(projectionMatrix, viewMatrix); ``` ## 3D Objekt beleuchtet & gedreht? ``` var vertexShaderSource = '#Version 300 es in vec2 a_position; vec3 a_normal; uniform mat4 u_modelViewProjection; uniform mat4 u_model; out vec3 v_normal; void main() { gl_position = u_modelViewProjection * a_position; v_normal = mat3(u_model) * a_normal; ``` ## Difluse Licht + punktlichtquelle: ``` var vertexShaderSource = '#version 300 es in vec4 a_position; in vec3 a_normal; uniform mat4 u_modelViewProjection; uniform mat4 u_model; uniform vec3 u_lightWorldPosition; out vec3 v_normal; out vec3 u_surfaceToLight; void main() { gl_position = (u_modelViewProjection * a_position); v_normal = mat3(u_model) * a_normal; vec3 surfaceWorldPosition = (u_model * a_position).xyz; u_surfaceToLight = u_lightWorldPosition - surfaceWorldPosition; ``` ## JS: ``` var positions = […]; var normals = […]; var a = [position[0], position[1], position[2], position[3], position[4], position[5]]; var v = [position[0], position[1], position[2], position[3], position[4], position[5]]; for (i = 0; i <= 3; i++) { var w = [positions[0 + 6], positions[1 + 7], positions[2 + 8]]; var p = m4.subtractVectors(v[4 * i]); Var q = m4.subtractVectors(w[4 * i]); var n = m4.normalize(m4.cross(p, q)); normals[0 + 4 * i] = n[0]; normals[1 + 4 * i] = n[1]; normals[2 + 4 * i] = n[2]; } ``` ## Spekulär Licht: ``` Var Vertex Shader = '#version 300 es in vec2 a_position; in vec3 a_normal; Uniform mat4 u_model; Uniform mat4 u_modelViewProjection; uniform vec3 u_LightworldPosition; Uniform vec3 u_viewWorldPosition; out vec3 v_normal; out vec3 u_surfaceToLight; out vec3 surfaceToView; void main() { gl_position = u_modelViewProjection * a_position; v_normal = a_normal * mat3(u_model); vec3 surfaceWorldPosition = (u_model * a_position).xyz; v_surfaceToLight = u_LightworldPosition - surfaceWorldPosition; v_surfaceToView = u_viewWorldPosition - surfaceWorldPosition; ``` ## Shaders für Textur: ``` Var Vertex Shader source = '#Version 300 es in vec2 a_position; vec2 a_texCoord; Uniform mat4 u_modelViewProjection; out vec2 v_texcoord; void main() { gl_position = u_modelViewProjection * a_position; v_texcoord = a_texcoord; ``` ## Bild texturierung: ``` var texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, texture); ``` ## Var fragment Shader Source = `#Version 300 es ``` ## Var fragment Shader Source = `#version 300 es ``` ## precision mediump float; ``` ## in vec3 v_normal; ``` ## in vec3 v_surfaceToLight; ``` ## in vec3 v_surfaceToView; ``` ## Uniform vec4 u_color; ``` ## Uniform float u_shiness; ``` ## out vec4 outColor; ``` ## void main() { ``` ## float light = dot(normalize(v_normal), normalize(v_surfaceToLight)); ``` ## Vec3 halfVector = normalize(normalize(v_surfaceToView) + normalize(v_surfaceToLight)); ``` ## float specular = 0.0; ``` ## if (light > 0.0) { ``` ## specular = pow(dot(normalize(v_normal), halfvector), u_shiness); ``` ## outColor = v_Color; ``` ## outColor.rgb *= light; ``` ## outColor.rgb += specular; ``` ## }; ``` ## precision mediump float; ``` ## in vec2 v_texCoord; ``` ## uniform sampler2D u_texture; ``` ## out vec4 outColor; ``` ## void main() { ``` ## outColor = texture(u_texture, v_texCoord); ``` ## }; ## 91. texImage2D(gl.TEXTURE_2D, mip, internal format, width, height, border, format, type ,new Uint8Array([255, 255, 255, 1])); ## @var image = new image; ## image.addEventListener('load', function(){ ## gl.bindTexture(gl.TEXTURE_2D, texture); ## gl.texImage2D(gl.TEXTURE_2D, mip, internal format, format, type, image); ## gl.generateMipmap(gl.TEXTURE_2D); ## drawscene(); ## }); ## Zuwei Texture jeder Seite: ``` var fragmentShaderSource = '#- Version 300 es precision mediump float; in vec2 v_texcoord; uniform sampler2D u_image0; uniform sampler2D u_image1; out vec4 outcolor; void main() { vec4 color0 = texture(u_image0, v_texcoord); vec4 color1 = texture(u_image1, v_texcoord); outcolor = color0 + color1; ``` ## TS: ``` gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, texture0); gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, texture1); ``` ## Mehrere Objente in Kreis: ``` for (var i = 0; i < numobj; ++i){ var angle = 2 * Math.PI/numobj; var x = Math.cos(angle) * radius; var z = Math.sin(angle) * radius; Var circleTransMatrix = m4.translation(x, 0, z); Var matrix = m4.multiply(circleTransMatrix, matrix); Var matrix2 = m4. multiply(perspectiveMatrix, matrix); } gl.uniformMatrix4fv(matrixLocation, true, matrix2); ```