Resource Handling in Spring MVCArawn ParkAdied 2014, 봄싹 세미나에서 발표한 `Resource Handling in Spring MVC`의 발표자료입니다.
주요 내용으로 Spring MVC에서 정적 자원(css, js, etc)을 다루는 방법을 다루고 있습니다.
데모 코드 : https://github.com/arawn/resource-handling-in-springmvc
ReactJS로 시작하는 멀티플랫폼 개발하기Taegon KimReact를 사용해 다양한 플랫폼에서 활용하는 방안을 "얕고 넓게" 다룹니다. 자세한 내용은 슬라이드에 있는 링크를 참고하세요. React, React Native, Electron, React Native Desktop 등이 소개되어 있습니다.
Secrets of the JavaScript Ninja - Chapter 12. DOM modificationHyuncheol Jeon"Secrets of the JavaScript Ninja"에서 12장 : DOM 조작에 대해 설명한다.
* 정리 된 위키 : http://goo.gl/VfjiM
Resource Handling in Spring MVCArawn ParkAdied 2014, 봄싹 세미나에서 발표한 `Resource Handling in Spring MVC`의 발표자료입니다.
주요 내용으로 Spring MVC에서 정적 자원(css, js, etc)을 다루는 방법을 다루고 있습니다.
데모 코드 : https://github.com/arawn/resource-handling-in-springmvc
ReactJS로 시작하는 멀티플랫폼 개발하기Taegon KimReact를 사용해 다양한 플랫폼에서 활용하는 방안을 "얕고 넓게" 다룹니다. 자세한 내용은 슬라이드에 있는 링크를 참고하세요. React, React Native, Electron, React Native Desktop 등이 소개되어 있습니다.
Secrets of the JavaScript Ninja - Chapter 12. DOM modificationHyuncheol Jeon"Secrets of the JavaScript Ninja"에서 12장 : DOM 조작에 대해 설명한다.
* 정리 된 위키 : http://goo.gl/VfjiM
Bs webgl소모임004Seonki PaikThe document discusses implementing a basic 2D game engine in WebGL. It outlines the steps needed to create the engine including initializing WebGL, parsing shaders, generating buffers, creating mesh and material structures, and rendering. Code snippets show implementations for functions like init(), makeBuffer(), shaderParser(), Material(), Mesh(), and a basic render() function that draws object hierarchies with one draw call per object. The overall goal is to build out the core components and architecture to enable building 2D games and experiences in WebGL.
ELD12: Badge DesignhalavaisThis document provides an overview of badges and how they can work. It discusses how the author got interested in badges, how badges can recognize skills and accomplishments, and what has been learned about implementing badges. The document also provides resources for getting started with badges and examples of how other organizations are using them.
The Power of WebGL - Hackeando sua GPU com JavaScriptRaphael AmorimThe document discusses the capabilities of WebGL, including how it utilizes GPU for graphics processing, the role of shaders, and the basics of creating 3D graphics within web applications. It touches on optimization techniques for CPU and GPU, performance considerations, and introduces WebVR for virtual reality experiences on the web. The document also includes various references and resources for further exploration of WebGL and related technologies.
WebGL: GPU acceleration for the open webpjcozziThe document provides an overview of WebGL, emphasizing its capability to bring 3D graphics to the web without plugins or installations, relying on JavaScript for development. It also covers performance improvements, cross-platform support, and the evolution of browser architectures, highlighting various resources and libraries for developers. Additionally, it discusses security considerations and cross-origin resource sharing challenges when using WebGL for rendering graphics.
WebGL: The Next GenerationTony ParisiThe document discusses WebGL, a royalty-free cross-platform API that allows for 3D graphics rendering in web browsers, including the introduction of WebGL 2 and the WebVR API for virtual reality. It highlights the structure of WebGL applications, provides coding examples, and emphasizes the use of libraries like Three.js to facilitate development. Additionally, it covers the GLTF format, a key asset format for efficient 3D model loading in WebGL applications.
WebGL의 무궁무진한 가능성 Jun Ho LeeThis document discusses the possibilities of WebGL and how it can be used for 3D graphics rendering on the web. It explains that WebGL allows for GPU-accelerated rendering directly in the browser by using APIs to control graphics processing units. It provides examples of using WebGL to initialize a WebGL context, create and compile shaders, and render 3D graphics by passing vertex and color data to shaders. The document recommends learning resources and frameworks for WebGL and suggests areas where WebGL could be applied, such as games, data visualization, and user interfaces.
웹 기반 하이퍼포먼스 그래픽 처리 - 문경두jscamp_krHTML5에는 CSS3D, Canvas, WebGL등의 전통적인 웹 개발의 영역을 넘어서는 그래픽 API들이 추가되었다.
웹 개발자들에게 생소할 수 있는 있는 이런 API들의 원리와 개발상의 팁들을 공유하고 현재의 현황과 어떻게 발전시킬 수 있을지 함께 이야기해보고자 한다.
3. WEBGL
WebGL 프로그래밍을 한다는 것은?
javascript로 만들어진 데이터를 기반으로
javscript형식의 webGL API를 통해 GPU를 동작시키는것
javascript GLSL
4. 1. Context3D 검색
2. 렌더러 준비
var gl = canvas.getContext(‘webgl’) // webgl Context 요청
gl.drawArray() // 전용 API
function render(){
gl.clearColor(Math.random(),Math.random(),Math.random(), 1)
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
}
setInterval(render,16)
![HOW TO..
var triangleData = [ 0.0, 1.0, 0.0, -1.0, -1.0, 0.0, 1.0, -1.0, 0.0 ]
var triangleBuffer = gl.createBuffer()
// 1.버퍼생성
gl.bindBuffer(gl.ARRAY_BUFFER,triangleBuffer)
// 2.버퍼를 GPU에 바인딩
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleData),gl.STATIC_DRAW)
// 3.버퍼에 데이터를 입력
triangleBuffer.itemSize = 3
triangleBuffer.numItem = 3
// 4.생성된 버퍼를 담아둔 JS 오브젝트에 추가정보입력](https://image.slidesharecdn.com/bswebgl001uniform-150309104216-conversion-gate01/85/Bs-webgl-001-uniform-12-320.jpg)
![유니폼(uniform) Draw가 진행되는 동안 상수처럼 유지되는 변수
var rotation = 0
var position = 0
function render() {
.. 생략
gl.vertexAttribPointer(firstProgram.aVertexPosition, triangleBuffer.itemSize, gl.FLOAT, false, 0, 0);
rotation += 0.1
position += 0.1
gl.uniform3fv(firstProgram.uRotation, [rotation, rotation, rotation])
gl.uniform3fv(firstProgram.uPosition, [Math.sin(position), Math.cos(position), 0])
gl.drawArrays(gl.TRIANGLES, 0, triangleBuffer.numItem);
}](https://image.slidesharecdn.com/bswebgl001uniform-150309104216-conversion-gate01/85/Bs-webgl-001-uniform-29-320.jpg)
![유니폼(uniform) Draw가 진행되는 동안 상수처럼 유지되는 변수
gl.uniform3fv(firstProgram.uRotation, [rotation, rotation, rotation])
gl.uniform3fv(firstProgram.uPosition, [Math.sin(position), Math.cos(position), 0])
gl.drawArrays(gl.TRIANGLES, 0, triangleBuffer.numItem);
gl.uniform3fv(firstProgram.uRotation, [0, 0, 0])
gl.uniform3fv(firstProgram.uPosition, [0, 0, 0])
gl.drawArrays(gl.TRIANGLES, 0, triangleBuffer.numItem);](https://image.slidesharecdn.com/bswebgl001uniform-150309104216-conversion-gate01/85/Bs-webgl-001-uniform-30-320.jpg)
