silvesthu

GPU Optimization for GameDev

Graphics Pipeline / GPU Architecture Overview

• 2011 - A trip through the Graphics Pipeline 2011
• 2013 - Performance Optimization Guidelines and the GPU Architecture behind them
• 2015 - Life of a triangle - NVIDIA's logical pipeline
• 2015 - Render Hell 2.0
• 2016 - How bad are small triangles on GPU and why?
• 2017 - GPU Performance for Game Artists
• 2019 - Understanding the anatomy of GPUs using Pokémon

mattdesl

Modules for Creative Coding

This workshop encourages students to make use of npm modules to build complex and interesting artworks.

If you find a module you want to use, like riso-colors, you can install it from your project folder like so:

npm install riso-colors

mattdesl

const canvasSketch = require("canvas-sketch");
const { GUI } = require("dat.gui");

const data = {
  background: "#de6060",
  number: 0.35
};

const settings = {
  dimensions: [2048, 2048],

rauschma

Using server-sent events

Why and how?

• Documentation: https://web.dev/articles/eventsource-basics
• Use case: broadcasting data from server to browsers
• Benefits:
  • Easy to understand and implement (only a few lines of code)
  • No library is needed
• Can use same HTTP(S) authentication as elsewhere in the app (which can’t be done with websockets)

mattdesl

global.THREE = require("three");

const canvasSketch = require('canvas-sketch');
const Random = require('canvas-sketch-util/random');

const gradientHeight = 512;
const settings = {
  dimensions: [ 2048, gradientHeight * 2 ]
};

magnuskahr

import SwiftUI

struct EnumPicker<T: Hashable & CaseIterable, V: View>: View {
    
    @Binding var selected: T
    var title: String? = nil
    
    let mapping: (T) -> V
    
    var body: some View {

sanzaru

import SwiftUI

struct Collapsible<Content: View>: View {
    @State var label: () -> Text
    @State var content: () -> Content
    
    @State private var collapsed: Bool = true
    
    var body: some View {
        VStack {

sanzaru

import SwiftUI

struct CollapsibleDemoView: View {
    var body: some View {
        VStack(spacing: 10) {
            HStack {
                Text("Here we have some fancy text content. Could be whatever you imagine.")
                Spacer()
            }
            .padding(.bottom)

marquizzo

Letter-casing:

CAPITALS = Global coordinates
lowercase = relative coords

Line Commands:

M x y: Move to
m x y: move to, relative to last position
L x y: Line to
l x y: line to, relative to last position
H x: Horizontal line to position x\

eldh

import * as React from "react";
import { useMousePosition } from "~/hooks/useMousePosition";

/** Component to cover the area between the mouse cursor and the sub-menu, to allow moving cursor to lower parts of sub-menu without the sub-menu disappearing. */
export function MouseSafeArea(props: { parentRef: React.RefObject<HTMLDivElement> }) {
  const { x = 0, y = 0, height: h = 0, width: w = 0 } = props.parentRef.current?.getBoundingClientRect() || {};
  const [mouseX, mouseY] = useMousePosition();
  const positions = { x, y, h, w, mouseX, mouseY };
  return (
    <div